<template>
  <div class="relationLayout">
    <div class="menubar-pane">
      <div class="content">
        <ul class="menu-top">
          <li class="search" @click="handleShowSearch">
            <a :class="[{showOpacity:showOpacity}]">
              <p>
                <span class="fa fa-search" style="font-size:19px"></span>
              </p>
              <span>搜索</span>
            </a>
          </li>
          <li class="workspaces" @click="handleShowCase">
            <a :class="[{showCaseOpacity:showCaseOpacity}]">
              <p>
                <span class="fa fa-list" style="font-size:19px"></span>
              </p>
              <span>分组</span>
            </a>
          </li>
          <!--<li class="workspaces" @click="handleShowRelations">-->
          <!--<a :class="[{showRelationOpacity:showRelationOpacity}]">-->
          <!--<p>-->
          <!--<svg-icon style="font-size: 20px;" icon-class="work" class-name="card-panel-icon"/>-->
          <!--</p>-->
          <!--<span>分析</span>-->
          <!--</a>-->
          <!--</li>-->
          <li class="divider"></li>
        </ul>

      </div>
    </div>

    <div @contextmenu.prevent="showMenu" id="relationBox" @dragover="allowDrop($event)" @drop="drop" @dragover.prevent style="overflow:hidden;width: 100%;height: 100%"></div>

    <!--详情-->
    <div class="detail-pane ui-resizable" :class="[{visible:showDetails}]">
      <div class="content">
        <div class="type-content org-visallo-layout-root" style="flex-direction: column;display: flex;">
          <div v-if="!isLineShow" class="detail-pane-head">
            <div class="detail-text-left">
              <p>{{nodesParmas.showName ? nodesParmas.showName : nodesParmas.displayname}}</p>
              <p>{{nodesParmas.name}}</p>
            </div>
            <div class="detail-pane-right" :style="{backgroundImage: `url(${nodesParmas.image})`}"></div>
          </div>
          <div v-else class="line-object">
            <template v-if="lineDetail.path =='twoway' || lineDetail.path =='to'">
              <div class="from">
                <template v-if="link_object[0]">
                  <p>{{link_object[0].showName?link_object[0].showName:link_object[0].displayName}}</p>
                  <p>{{link_object[0].name}}</p>
                </template>
              </div>
              <div class="middle">{{lineDetail.linkName}}</div>
              <div class="to">
                <template v-if="link_object[1]">
                  <p>{{link_object[1].showName?link_object[1].showName:link_object[1].displayName}}</p>
                  <p>{{link_object[1].name}}</p>
                </template>
              </div>
            </template>
            <template v-else-if="lineDetail.path =='from'">
              <div class="from">
                <template v-if="link_object[1]">
                  <p>{{link_object[1].showName?link_object[1].showName:link_object[1].displayName}}</p>
                  <p>{{link_object[1].name}}</p>
                </template>
              </div>
              <div class="middle">{{lineDetail.linkName}}</div>
              <div class="to">
                <template v-if="link_object[0]">
                  <p>{{link_object[0].showName?link_object[0].showName:link_object[0].displayName}}</p>
                  <p>{{link_object[0].name}}</p>
                </template>
              </div>
            </template>
          </div>
          <!--属性添加按钮-->
          <div class="org-visallo-toolbar">
            <ul v-if="!isLineShow">
              <li class="has-submenu no-event">
                <a href="javascript:;">
                  <strong>查看</strong>
                </a>
                <ul>
                  <li class=" hide-in-fullscreen-details" @click="viewObjectInfo(nodesParmas.objecttype,nodesParmas.rowkey,nodesParmas.objecturi,nodesParmas.name,nodesParmas.displayname,nodesParmas.image,nodesParmas.showName,'false',nodesParmas.belongGroup)">

                    <a href="javascript:;">
                      查看
                      <div class="subtitle">
                        在新窗口/标签中打开
                      </div>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="has-submenu no-event">
                <a href="javascript:;">
                  <strong>属性</strong>
                </a>
                <ul>
                  <li class=" hide-in-fullscreen-details" @click="getproperty(nodesParmas.objecturi)">
                    <a href="javascript:;">
                      属性
                      <div class="subtitle">
                        向实体添加属性
                      </div>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="has-submenu  pull-right no-event">
                <a href="javascript:;" class="icon">
                  <strong style="">&nbsp;</strong>
                </a>
                <ul>
                  <li class=" requires-EDIT" data-event="deleteItem" @click="handleDeleteNode">
                    <a>
                      移除实体
                      <div class="subtitle">从画布中移除</div>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
            <ul v-else>
              <li class="has-submenu no-event">
                <a href="javascript:;">
                  <strong>属性</strong>
                </a>
                <ul>
                  <li class=" hide-in-fullscreen-details" @click="getLineproperty(lineDetail.linkUri)">
                    <a href="javascript:;">
                      属性
                      <div class="subtitle">
                        向线添加属性
                      </div>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>

          <!--属性信息选择添加-->
          <div class="overflow-layout" v-if="!isLineShow" style="flex: 1 1 auto; overflow: auto; position: relative;">
            <div class="property-input">
              <div class="form" v-if="showSelect">
                <el-form ref="addAttribute" :model="addAttribute">
                  <el-form-item>
                    <el-select style="width: 100%;" size="small" v-model="addAttribute.propertyUri" @change="handleChoosePropertyUri(addAttribute.propertyUri)" placeholder="请选择属性">
                      <el-option v-for="(itemObj,index) in findOperateListModelAll" :label="itemObj.displayname" :value="itemObj.propertyUri" :key="index"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item style="margin-bottom: 10px" v-if="addAttribute.propertyType == 'GisData'">
                    <el-input placeholder="请输入经度" v-model="addAttributeSave.latitude"></el-input>
                  </el-form-item>
                  <el-form-item style="margin-bottom: 10px" v-if="addAttribute.propertyType == 'GisData'">
                    <el-input placeholder="请输入纬度" v-model="addAttributeSave.longitude"></el-input>
                  </el-form-item>
                  <el-form-item style="margin-bottom: 10px" v-if="addAttribute.propertyType == 'GisData'">
                    <el-input placeholder="请输入描述" v-model="addAttributeSave.address"></el-input>
                  </el-form-item>
                  <el-form-item style="margin-bottom: 10px" v-if="addAttribute.propertyType == 'TimeInterval'">
                    <el-date-picker style="width: 100%" v-model="addAttributeSave.timeStart" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item style="margin-bottom: 10px" v-if="addAttribute.propertyType == 'TimeInterval'">
                    <el-date-picker style="width: 100%" v-model="addAttributeSave.timeEnd" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item style="margin-bottom: 10px" v-if="addAttribute.propertyType == 'DateTime'">
                    <el-date-picker v-model="addAttributeSave.value" type="datetime" style="width: 100%;" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item v-if="addAttribute.propertyType == 'String'">
                    <el-input :placeholder="`请输入${addAttribute.name}`" v-model="addAttributeSave.value"></el-input>
                  </el-form-item>
                  <el-form-item style="text-align: right">
                    <el-button size="small" @click="handleCannel">取消</el-button>
                    <el-button size="small" type="primary" @click="handleCreateAttr()">立即创建</el-button>
                  </el-form-item>
                </el-form>
              </div>

              <div class="table-attribute">
                <table>
                  <tr v-for="item in propertyList">
                    <td class="property-name" colspan="1">{{item.propertyName}}</td>
                    <td class="property-value" colspan="2">
                      <div v-if="item.propertyType == 'TimeInterval'">
                        <p v-for="itemValue in item.propertyValues">
                          <span>{{itemValue.value.timeStart}} - {{itemValue.value.timeEnd}}</span>
                        </p>
                      </div>
                      <div v-else-if="item.propertyType == 'GisData'">
                        <p v-for="itemValue in item.propertyValues">
                          <span>{{itemValue.value.address}} , {{itemValue.value.longitude}} , {{itemValue.value.latitude}}</span>
                        </p>
                      </div>
                      <div v-else>
                        <p v-for="itemValue in item.propertyValues">
                          <span>{{itemValue.value}}</span>
                        </p>
                      </div>
                    </td>
                  </tr>
                </table>
              </div>

              <div style="padding-left: 15px;padding-right:5px;background-color: #FFF">
                <el-collapse>
                  <el-collapse-item title="相关实体" name="socialdynamic" v-if="socialaccount.length != 0">
                    <el-select v-model="selectsocialaccount" placeholder="请选择分类" style="    width: 80%;
    margin: 0 10%;
    padding-bottom: 20px;">
                      <el-option v-for="item in socialaccountArray" :key="item" :label="item" :value="item">
                      </el-option>
                    </el-select>
                    <template v-for="item in socialaccount">
                      <div v-if="item.name == selectsocialaccount" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                        <div>
                          <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                        </div>
                        <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                          <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                          <span style="font-size: 13px">{{item.name}}</span>
                          <p style="width: 100%;line-height: 1.5;white-space:normal">
                            {{item.description}}
                          </p>
                        </div>
                      </div>
                    </template>
                    <!-- <div v-for="item in socialaccount" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.description}}
                        </p>
                      </div>
                    </div> -->
                  </el-collapse-item>
                  <el-collapse-item title="相关事件" name="dynamicCondition" v-if="dynamicCondition.length != 0">
                    <el-select v-model="selectdynamicCondition" placeholder="请选择分类" style="    width: 80%;
    margin: 0 10%;
    padding-bottom: 20px;">
                      <el-option v-for="item in dynamicConditionArray" :key="item" :label="item" :value="item">
                      </el-option>
                    </el-select>
                    <template v-for="item in dynamicCondition">
                      <div v-if="item.name == selectdynamicCondition" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                        <div>
                          <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                        </div>
                        <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                          <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                          <span style="font-size: 13px">{{item.name}}</span>
                          <p style="width: 100%;line-height: 1.5;white-space:normal">
                            {{item.postContent}}
                          </p>
                        </div>
                      </div>
                    </template>
                  </el-collapse-item>

                  <el-collapse-item title="相关人物" name="keyfigures" v-if="keyfigures.length != 0">
                    <div v-for="item in keyfigures" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>

                  <el-collapse-item title="相关组织" name="focusgroup" v-if="focusgroup.length != 0">
                    <div v-for="item in focusgroup" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>
                  <!-- 文档 -->
                  <el-collapse-item title="相关文档" name="document" v-if="document.length != 0">
                    <div v-for="item in document" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>
                  <!-- 多媒体 -->
                  <el-collapse-item title="相关多媒体" name="media" v-if="media.length != 0">
                    <div v-for="item in media" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </div>
          <!-- 线属性管理 -->
          <div class="overflow-layout" v-else style="flex: 1 1 auto; overflow: auto; position: relative;">
            <div class="property-input">
              <div class="form" v-if="showselectLineProtype">
                <el-form ref="addLineAttribute" :model="addAttributeLine">
                  <el-form-item>
                    <el-select style="width: 100%;" size="small" v-model="addAttributeLine.propertyUri" @change="handleChoosePropertyUriLine(addAttributeLine.propertyUri)" placeholder="请选择属性">
                      <el-option v-for="(itemObj,index) in LinefindOperateListModelAll" :label="itemObj.displayname" :value="itemObj.propertyUri" :key="index"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item style="margin-bottom: 10px" v-if="addAttributeLine.propertyType == 'GisData'">
                    <el-input placeholder="请输入经度" v-model="addAttributeLineSave.latitude"></el-input>
                  </el-form-item>
                  <el-form-item style="margin-bottom: 10px" v-if="addAttributeLine.propertyType == 'GisData'">
                    <el-input placeholder="请输入纬度" v-model="addAttributeLineSave.longitude"></el-input>
                  </el-form-item>
                  <el-form-item style="margin-bottom: 10px" v-if="addAttributeLine.propertyType == 'GisData'">
                    <el-input placeholder="请输入描述" v-model="addAttributeLineSave.address"></el-input>
                  </el-form-item>
                  <el-form-item style="margin-bottom: 10px" v-if="addAttributeLine.propertyType == 'TimeInterval'">
                    <el-date-picker style="width: 100%" v-model="addAttributeLineSave.timeStart" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item style="margin-bottom: 10px" v-if="addAttributeLine.propertyType == 'TimeInterval'">
                    <el-date-picker style="width: 100%" v-model="addAttributeLineSave.timeEnd" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item style="margin-bottom: 10px" v-if="addAttributeLine.propertyType == 'DateTime'">
                    <el-date-picker v-model="addAttributeLineSave.value" type="datetime" style="width: 100%;" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item v-if="addAttributeLine.propertyType == 'String'">
                    <el-input :placeholder="`请输入${addAttributeLine.name}`" v-model="addAttributeLineSave.value"></el-input>
                  </el-form-item>
                  <el-form-item style="text-align: right">
                    <el-button size="small" @click="handleCannelLine">取消</el-button>
                    <el-button size="small" type="primary" @click="handleCreateAttrLine()">立即创建</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div class="table-attribute">
                <table>
                  <tr v-for="item in LinepropertyList">
                    <td class="property-name" colspan="1">{{item.propertyName}}</td>
                    <td class="property-value" colspan="2">
                      <div v-if="item.propertyType == 'TimeInterval'">
                        <p v-for="itemValue in item.propertyValues">
                          <span>{{itemValue.value.timeStart}} - {{itemValue.value.timeEnd}}</span>
                        </p>
                      </div>
                      <div v-else-if="item.propertyType == 'GisData'">
                        <p v-for="itemValue in item.propertyValues">
                          <span>{{itemValue.value.address}} , {{itemValue.value.longitude}} , {{itemValue.value.latitude}}</span>
                        </p>
                      </div>
                      <div v-else>
                        <p v-for="itemValue in item.propertyValues">
                          <span>{{itemValue.value}}</span>
                        </p>
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--//菜单-->
    <div>
      <div class="dropdown" v-if="cyVisible">
        <ul class="dropdown-menu" :style="{ top: cyCanves.top + 'px', left: cyCanves.left + 'px' }">
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="javascript:;" @click="handleCreatEntity">
              新增实体
            </a>
          </li>
          <li role="presentation" class="divider"></li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="javascript:;" @click="handeleChooseLayout('initialize')">
              画布居中
            </a>
          </li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="javascript:;" @click="allKZ()">
              扩展
            </a>
          </li>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="javascript:;" @click="allSX()">
              收缩
            </a>
          </li>
          <li class="dropdown-submenu" role="presentation">
            <a role="menuitem" tabindex="-1" href="javascript:;">
              布局
            </a>
            <ul class="dropdown-menu" style="top: 6px;">
              <li role="presentation">
                <a href="javascript:;" role="menuitem" tabindex="-1" @click="handeleChooseLayout('circle')">圆</a>
              </li>
              <li role="presentation">
                <a href="javascript:;" role="menuitem" tabindex="-1" @click="handeleChooseLayout('grid')">栅格</a>
              </li>
              <li role="presentation">
                <a href="javascript:;" role="menuitem" tabindex="-1" @click="handeleChooseLayout('breadthfirst')">垂直</a>
              </li>
              <li role="presentation">
                <a href="javascript:;" role="menuitem" tabindex="-1" @click="handeleChooseLayout('random')">自由布局</a>
              </li>
            </ul>
          </li>
          <li class="dropdown-submenu" role="presentation">
            <a role="menuitem" tabindex="-1">
              放大
            </a>
            <ul class="dropdown-menu" style="top: 6px;">
              <li role="presentation">
                <a href="javascript:;" role="menuitem" tabindex="-1" @click="handleChangeSize('2')">放大2倍</a>
              </li>
              <li role="presentation">
                <a href="javascript:;" role="menuitem" tabindex="-1" @click="handleChangeSize('1')">放大1倍</a>
              </li>
              <li role="presentation">
                <a href="javascript:;" role="menuitem" tabindex="-1" @click="handleChangeSize('0.5')">缩放½x</a>
              </li>
            </ul>
          </li>
          <li role="presentation" class="divider"></li>
          <li role="presentation" @click="handleAddDes">
            <a role="menuitem" tabindex="-1">
              快照
            </a>
          </li>
          <!--<li role="presentation" class="divider"></li>-->
          <!--<li role="presentation" @click="handlenewSnapshot2">-->
          <!--<a role="menuitem" tabindex="-1">-->
          <!--保存-->
          <!--</a>-->
          <!--</li>-->
          <!--<li role="presentation" class="divider"></li>-->
          <!--<li role="presentation" @click="handlenewSnapshot1">-->
          <!--<a role="menuitem" tabindex="-1">-->
          <!--保存画布-->
          <!--</a>-->
          <!--</li>-->
        </ul>
      </div>

      <div class="dropdown" v-if="nodesVisible">
        <ul class="dropdown-menu" :style="{ top: cyCanves.top + 'px', left: cyCanves.left + 'px' }">
          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="javascript:;" @click="handleCreateEdge">
              连接
            </a>
          </li>
          <li role="presentation" v-if="showIsWho">
            <a role="menuitem" tabindex="-1" href="javascript:;" @click="handleCreateEdge('落地')">
              落地
            </a>
          </li>

          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="javascript:;" @click="viewObjectInfo(nodesParmas.objecttype,nodesParmas.rowkey,nodesParmas.objecturi,nodesParmas.name,nodesParmas.displayname,nodesParmas.image,nodesParmas.showName,'false',nodesParmas.belongGroup)">
              查看
            </a>
          </li>

          <li role="presentation" v-if="addGroup">
            <a role="menuitem" tabindex="-1" href="javascript:;" @click="handleAddGroup">
              {{addGroupName}}
            </a>
          </li>
          <!-- 扩展 -->
          <li role="presentation" v-if="nodeiskuozhan">
            <a role="menuitem" tabindex="-1" href="javascript:;" @click="kuozhan()">
              扩展
            </a>
          </li>
          <li role="presentation" v-if="nodeiskuozhan">
            <a role="menuitem" tabindex="-1" href="javascript:;" @click="shousuo()">
              收缩
            </a>
          </li>
          <li class="dropdown-submenu" role="presentation">
            <a role="menuitem" tabindex="-1" href="javascript:;">
              关联
            </a>
            <ul class="dropdown-menu" style="top: 6px;">
              <li role="presentation">
                <a role="menuitem" tabindex="-1" href="javascript:;" @click="openFilterListRelation('socialaccount')">关联实体</a>
              </li>
              <li role="presentation">
                <a role="menuitem" tabindex="-1" href="javascript:;" @click="openFilterListRelation('socialdynamic')">关联事件</a>
              </li>
              <li role="presentation">
                <a role="menuitem" tabindex="-1" href="javascript:;" @click="openFilterListRelation('keyfigures')">关联人物</a>
              </li>
              <li role="presentation">
                <a role="menuitem" tabindex="-1" href="javascript:;" @click="openFilterListRelation('focusgroup')">关联组织</a>
              </li>
              <!-- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="openFilterListRelation('document')">关联文档</a></li> -->
              <!-- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="openFilterListRelation('media')">关联多媒体</a></li> -->
            </ul>
          </li>
          <li role="presentation" class="divider"></li>
          <li class="dropdown-submenu" role="presentation">
            <a role="menuitem" tabindex="-1" href="javascript:;">
              删除
            </a>
            <ul class="dropdown-menu" style="top: 6px;">
              <li v-if="deleteLineShow" role="presentation">
                <a role="menuitem" tabindex="-1" href="javascript:;" @click="deleteEdge()">删除边</a>
              </li>
              <template v-else>
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="javascript:;" @click="handleDeleteNode()">移除实体</a>
                </li>
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="javascript:;" @click="handledeletSelect('socialdynamic')">移除关联事件</a>
                </li>
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="javascript:;" @click="handledeletSelect('socialaccount')">移除关联实体</a>
                </li>
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="javascript:;" @click="handledeletSelect('keyfigures')">移除关联人物</a>
                </li>
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="javascript:;" @click="handledeletSelect('focusgroup')">移除关联组织</a>
                </li>
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="javascript:;" @click="handledeletSelect('document')">移除关联文档</a>
                </li>
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="javascript:;" @click="handledeletSelect('media')">移除关联多媒体</a>
                </li>
                <!-- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="handleDeleteDynamicCondition()">移除关联事件</a></li> -->
                <!-- <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="handleDeltetAccountNumber()">移除关联实体</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="handleDeleteFigure()">移除关联人物</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="handleDeltetOrganization()">移除关联组织</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="handleDeleteDocument()">移除关联文档</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" @click="handleDeltetMedia()">移除关联多媒体</a></li> -->
              </template>
            </ul>
          </li>
        </ul>
      </div>
    </div>

    <!--//添加实体-->
    <div class="dialog-popover" v-if="addNodesVisible" :style="{ top: cyCanves.top + 'px', left: cyCanves.left + 'px' }" style="position: absolute;">
      <div class="fileImportPopover popover collapseVisibility bottom" style="display: block;">
        <div class="popover-title">创建实体</div>
        <div class="arrow" style="left: 50%;"></div>
        <div class="popover-content show-create-form">
          <el-form ref="form" :rules="formRules" :model="form" label-width="0">
            <el-form-item>
              <el-input size="mini" :readonly="true" @click.stop.native="showTreeFn" placeholder="请选择对象" v-model="form.exampleName" style="position: relative;"></el-input>
              <div class="treeDemo" v-if="showTree" style="display: block;position: absolute;top: 33px;z-index: 23;">
                <el-tree :data="addNode">
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span @click="handleGetTreeDate(data)">
                      <img v-if="data.icon" width="15px" style="height: 15px;font-size: 0;position: relative;top: 10px;" :src="data.icon" alt="">
                      <span>{{ node.label }}</span>
                    </span>
                  </span>
                </el-tree>
              </div>
            </el-form-item>
            <el-form-item v-for="(item, index) in findOperateListModel" :key="index" v-if="item.representative == '1'">
              <el-input size="mini" v-if="item.propertyType == 'GisData'" v-model="item.longitude" :placeholder="`经度`" style="width: 68px"></el-input>
              <el-input size="mini" v-if="item.propertyType == 'GisData'" v-model="item.latitude" :placeholder="`纬度`" style="width: 68px"></el-input>
              <el-input size="mini" v-if="item.propertyType == 'GisData'" v-model="item.address" :placeholder="`地理位置描述`" style="width: 120px"></el-input>
              <el-date-picker size="mini" v-if="item.propertyType == 'TimeInterval'" style="width: 45%" v-model="item.timeStart" type="datetime" placeholder="选择日期">
              </el-date-picker>
              <el-date-picker size="mini" v-if="item.propertyType == 'TimeInterval'" style="width: 45%" v-model="item.timeEnd" type="datetime" placeholder="选择日期">
              </el-date-picker>
              <el-date-picker size="mini" v-if="item.propertyType == 'DateTime'" v-model="item.value" type="datetime" placeholder="选择日期">
              </el-date-picker>
              <el-input size="mini" v-if="item.propertyType == 'String'" :placeholder="`请输入${item.displayname}`" v-model="item.value"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" style="width: 100%" :loading="createLoading" @click="handleSaveEntity">创 建
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <!--创建边-->
    <div class="dialog-popover" v-show="addEdgesVisible" :style="{ top: cyCanves.top + 'px', left: cyCanves.left + 'px' }" style="position: absolute;">
      <div class="fileImportPopover popover collapseVisibility bottom" style="display: block;">
        <div class="popover-title">创建关系</div>
        <div class="arrow" style="left: 50%;"></div>
        <div class="popover-content show-create-form">
          <el-form ref="form" :rules="formRules" :model="form" label-width="0">
            <el-form-item>
              <el-select size="small" style="width: 100%" v-model="createRelationTemp.relation" @change="toggleChooseOrAddRelation()" :disabled="disabledIswho">
                <el-option value="0" label="现有关系">现有关系</el-option>
                <el-option value="1" label="新建关系">新建关系</el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-show="!vindex">
              <el-select size="small" v-model="createRelationTemp.linkUri" :disabled="disabledIswho" style="width: 100%">
                <el-option v-for="item in getRelationList" :key="item.uri" :value="item.uri" :label="item.displayname"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item v-show="!vindex" style="margin-bottom: 5px;">
              <el-date-picker size="small" v-model="timeStart" type="datetime" placeholder="选择开始时间">
              </el-date-picker>
            </el-form-item>

            <el-form-item v-show="!vindex">
              <el-date-picker size="small" v-model="timeEnd" type="datetime" placeholder="选择结束时间">
              </el-date-picker>
            </el-form-item>

            <el-form-item v-show="vindex">
              <el-input size="small" v-model="createRelationTemp.linkDTO.displayname" placeholder="请输入中文名称"></el-input>
            </el-form-item>
            <el-form-item v-show="vindex">
              <el-input size="small" v-model="createRelationTemp.linkDTO.uri" placeholder="请输入英文名称"></el-input>
            </el-form-item>
            <el-form-item v-show="vindex">
              <el-select size="small" v-model="createRelationTemp.linkDTO.type" style="width: 100%">
                <el-option value="TwoWay" label="双方对等关系">双方对等关系</el-option>
                <el-option value="OneWay" label="单向关系">单向关系</el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-show="vindex">
              <el-input size="small" v-model="createRelationTemp.linkDTO.description" placeholder="请输入描述"></el-input>
            </el-form-item>

            <el-form-item v-show="vindex" style="margin-bottom: 5px;">
              <el-date-picker size="small" v-model="timeStart" type="datetime" placeholder="选择开始时间">
              </el-date-picker>
            </el-form-item>

            <el-form-item v-show="vindex">
              <el-date-picker size="small" v-model="timeEnd" type="datetime" placeholder="选择结束时间">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" size="mini" style="width: 100%" :loading="createLoading" @click="confirmCreateRelation">创 建
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div>
      <!--搜索-->
      <div class="workspaces-pane" style="left: 0;top: 0;" :class="[{visible:visible}]">
        <div class="content">
          <div class="navbar-search">
            <div style="margin: 15px">
              <el-input size="mini" v-model="keywords" @keyup.enter.native="handleSearch">
                <i style="cursor: pointer" class="el-icon-search el-input__icon" slot="suffix" @click="handleSearch">
                </i>
              </el-input>

              <ul class="search-condition" v-show="!keywordVisible">
                <li class="text-danger">
                  请输入关键字
                </li>
              </ul>

              <ul class="search-condition" v-show="keywordVisible">
                <li v-for="(item, index) in searchParams.keywords" :key="index">
                  <span>{{item}}</span>
                  <i class="el-icon-error" @click="handleDeleteSearch(index)"></i>
                </li>
              </ul>
            </div>

            <ul class="prop-filters">
              <li class="concept-filter-header">
                对象类型
              </li>
              <li>
                <div class="content">
                  <div class="search-options">
                    <el-select v-model="searchParams.objectType" @change="handleObjectType" size="mini">
                      <el-option value="socialaccount" label="实体">实体</el-option>
                      <el-option value="socialdynamic" label="事件">事件</el-option>
                      <el-option value="keyfigures" label="重点人物">重点人物</el-option>
                      <el-option value="focusgroup" label="重点组织">重点组织</el-option>
                      <el-option value="document" label="文档">文档</el-option>
                      <el-option value="media" label="多媒体">多媒体</el-option>
                    </el-select>
                  </div>
                </div>
              </li>

              <li class="concept-filter-header">
                属性类型
              </li>
              <li>
                <div class="content">
                  <div class="search-options">
                    <el-select v-model="objectTypeCount" size="mini" @change="handleObjectTypeCount">
                      <el-option v-for="item in objectListCount" :key="item.uri" :value="item.uri" :label="item.displayname">
                        {{item.displayname}}
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </li>

              <!--<li class="concept-filter-header">-->
              <!--事件属性类型-->
              <!--</li>-->
              <!--<li>-->
              <!--<div class="content">-->
              <!--<div class="search-options">-->
              <!--<el-select v-model="objectTypeDynamic" size="mini" @change="handleObjectTypeDynamic">-->
              <!--<el-option v-for="item in objectListDynamic" :key="item.uri" :value="item" :label="item.name">-->
              <!--{{item.name}}-->
              <!--</el-option>-->
              <!--</el-select>-->
              <!--</div>-->
              <!--</div>-->
              <!--</li>-->

              <li>
                <ul class="search-condition">
                  <li v-for="(item,index) in objectListDynamicChoose" :key="index">
                    <span>{{item.name}}</span>
                    <i class="el-icon-error" @click="hanldeDeleteObjectListDynamic(index)"></i>
                  </li>
                </ul>
              </li>
            </ul>

          </div>
        </div>
      </div>

      <!--搜索结果-->
      <!--:class="[{resultVisible:resultVisible}]"-->
      <div v-show="resultVisible" id="result" class="workspaces-pane result-visible" style="left: 0;top: 0;" :class="[{resultVisible:resultVisible}]">
        <ul class="search-result">
          <li draggable="true" v-for="(item,index) in entryList" :class="[{active:item.active}]" @dragstart="dragstart($event, item)" @dragend="dragend" :key="index" @click.shift="handleChooseSearch($event,index)" @click="handleChooseSearchClick($event,index,item)"
            @click.ctrl="handleChooseSearchCtrl($event,index)">
            <div>
              <span class="search-result-img preview" :style="{backgroundImage: `url(${item.iconUrl})`}">
              </span>
              <span class="search-result-container">
                <span class="search-info">
                  {{item.showName ? item.showName : (item.displayName)}}
                </span>
                <p class="search-info-info">
                  {{item.name}}
                </p>
              </span>
            </div>
          </li>
        </ul>
      </div>

      <!--分组列表-->
      <div class="workspaces-pane" style="left: 0;top: 0;" :class="[{showCase:showCase}]">
        <div class="content">
          <div class="navbar-search">
            <ul class="workspaces-list">
              <li draggable class="w-mine wid-id1" v-for="(item,index) in loadTreeList" :key="item.id" :class="[{active:index == activeNum}]" @click="handleChooseGroupId(index,item.id,item.displayname)">
                <a>
                  <i class="fa fa-file-o" style="padding-right: 10px;"></i>{{item.displayname}}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!--分组结果-->
      <div v-show="groupVisible" id="groupResult" class="workspaces-pane result-visible" style="left: 0;top: 0;" :class="[{groupVisible:groupVisible}]">
        <ul class="search-result">
          <li draggable="true" v-for="(item,index) in groupList" :class="[{groupActive:item.active}]" @dragstart="dragstart($event, item)" @dragend="dragend" :key="index" @click.shift="handleChooseSearch1($event,index)" @click="handleChooseSearchClick1($event,index,item)"
            @click.ctrl="handleChooseSearchCtrl1($event,index)">
            <div>
              <span class="search-result-img preview" :style="{backgroundImage: `url(${item.iconUrl})`}">
              </span>
              <span class="search-result-container">
                <span class="search-info">
                  {{item.showName ? item.showName : (item.displayName)}}
                </span>
                <p class="search-info-info">
                  {{item.name}}
                </p>
              </span>
            </div>
          </li>
        </ul>
      </div>
      <!--分析-->
      <!--<div class="workspaces-pane products-pane" style="left: 0;top: 0;" :class="[{showRelations:showRelations}]">-->
      <!--<div class="content">-->
      <!--<div class="products-container">-->
      <!--<div class="products-list-items">-->

      <!--<div class="" style="position: relative;">-->
      <!--&lt;!&ndash;<div class="products-list-item">&ndash;&gt;-->
      <!--&lt;!&ndash;<el-button type="primary" size="mini" style="width: 100%;margin-bottom: 15px" @click="handlenewSnapshot1">新建</el-button>&ndash;&gt;-->
      <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--<div class="products-list-item"-->
      <!--v-for="(item, index) in getSnapshotList" :class="[{active:index == snapshotActive}]"-->
      <!--@click="handleGetSnapDataById(item.id,index, item.description)">-->
      <!--<div class="buttons">-->
      <!--<el-button type="danger" size="mini" @click.stop="delSnapData(item.id, index)">删除</el-button>-->
      <!--</div>-->
      <!--<div class="preview" :style="{backgroundImage: `url(${item.snapshot})`}">-->

      <!--</div>-->
      <!--<div class="content">-->
      <!--<h1>-->
      <!--<font style="vertical-align: inherit;">-->
      <!--<font style="vertical-align: inherit;">{{item.createTime.split(' ')[0]}}</font></font>-->
      <!--</h1>-->
      <!--<h1>-->
      <!--<font style="vertical-align: inherit;">-->
      <!--<font style="vertical-align: inherit;">{{item.createTime.split(' ')[1]}}-->
      <!--</font>-->
      <!--</font>-->
      <!--</h1>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
    </div>

    <div id="timeLine" class="timeLine" style="height: 200px;position:absolute;z-index: 55;background: rgba(0,0,0,0.4);" :class="[{hasShowRelation:showRelations},
                  {hasShowRelation:showCase},
                  {hasShowRelation:visible},
                  {hasShowentryList:resultVisible},
                  {hasShowentryList:groupVisible},
                  {showTimeLint:!showTimeLint}]">
      <p style="position: absolute;top: -55px;">
        {{groupDisplayName}} |
        <span>{{historyName != 'null' ? historyName : ' '}} </span>
      </p>
      <span @click="handleTimeLint" class="" style="position:absolute;top: -25px;  cursor: pointer;
">时间轴</span>
      <span @click="handleHistorySanp" class="" style="position:absolute;top: -25px; left: 115px;  cursor: pointer;
      ">历史快照</span>

      <span @click="showTimeLint = false" class="toggle-timeline" style="position:absolute;top: -25px; left: 185px;  cursor: pointer;
      ">收缩</span>

      <div v-if="timeLimeVisible" style="height: 200px;" id="container">
      </div>
      <div v-if="timeLimeVisible" class="bar_box">
        <el-popover placement="top-start" title="时间轴选择" width="200" trigger="click" popper-class="line-popover">
          <ul id="allTimeCheck">
            <el-checkbox-group v-model="checkedNames">
              <el-checkbox @change="changeselect" v-for="(item,index) in allTimeCheck" :key="'item'+index" :label="item"></el-checkbox>
            </el-checkbox-group>
          </ul>
          <el-button slot="reference" icon="el-icon-setting" class="icon_select"></el-button>
        </el-popover>
      </div>
      <div class="history" v-show="historyVisible">
        <ul class="clearfix">
          <li v-for="(item, index) in getSnapshotList" :class="[{active:index == snapshotActive}]" @click.stop="handelSaveDataTip(item.id,index, item.description)">
            <div class="" style="position: relative;">
              <!--<div class="products-list-item">-->
              <!--<el-button type="primary" size="mini" style="width: 100%;margin-bottom: 15px" @click="handlenewSnapshot1">新建</el-button>-->
              <!--</div>-->
              <div class="products-list-item">
                <div class="buttons">
                  <div style="display:flex;justify-content: center;padding: 0 0 10px 0;">
                    <el-button type="danger" size="mini" @click.stop="delSnapData(item.id, index)">删除</el-button>
                    <el-button type="primary" size="mini" @click.stop="editVisibleSnapData(item.id, index,item.description)">编辑</el-button>
                  </div>
                  <el-button type="success" size="mini" icon="el-icon-download" @click="download(item.snapshot)">下载</el-button>
                </div>
                <div style="height: 100px;background-size:contain;background-repeat: no-repeat;background-position: center;" class="preview preview-other" :style="{backgroundImage: `url(${item.snapshot})`}">

                </div>
                <div class="content">
                  <h1>
                    <font style="vertical-align: inherit;">
                      <font style="vertical-align: inherit;">

                        {{item.description}}
                        <!--<el-input style="position:relative;z-index: 55" size="mini" v-show="item.editDes" @blur.stop="" placeholder="请输入内容" class="input-with-select" v-model="item.description">-->
                        <!--<el-button slot="append" style="background-color: #409EFF;color: #FFF;" size="mini" type="sucess" @click.stop="editSnapData(item.id, item.description,index)">保 存</el-button>-->
                        <!--</el-input>-->
                        <!--<span v-show="!item.editDes">-->
                        <!--{{item.description}}-->
                        <!--</span>-->
                      </font>
                    </font>
                  </h1>
                  <h1>
                    <font style="vertical-align: inherit;">
                      <font style="vertical-align: inherit;">{{item.createTime}}</font>
                    </font>
                  </h1>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <el-dialog :modal-append-to-body='false' title="描述信息" width="30%" :close-on-click-modal="false" :visible.sync="describeVisible">
      <el-form ref="describe" label-width="100px">
        <el-form-item label="描述信息">
          <el-input v-model="describe"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="describeVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handlenewSnapshot1" size="small">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :modal-append-to-body='false' title="描述信息" width="30%" :close-on-click-modal="false" :visible.sync="describeVisible1">
      <el-form ref="describe1" label-width="100px">
        <el-form-item label="描述信息">
          <el-input v-model="describe1"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="describeVisible1 = false" size="small">取 消</el-button>
        <el-button type="primary" @click="editSnapData" size="small">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 对象关联选择具体对象 -->
    <el-dialog title="关联选择" :visible.sync="glSelectvisible" width="30%">
      <div style="width:92%;margin:0 4%;margin-bottom: 15px;">
        <el-date-picker v-model="selectTimeStart" value-format="timestamp" type="date" placeholder="开始日期" style="width:49%">
        </el-date-picker>
        <el-date-picker v-model="selectTimeEnd" value-format="timestamp" type="date" placeholder="结束日期" style="width:49%">
        </el-date-picker>
      </div>
      <!-- 时间选择框 -->
      <!-- <el-date-picker
        v-model="selectTime"
        type="daterange"
        value-format="timestamp"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width:92%;margin:0 4%;margin-bottom: 15px;">
      </el-date-picker> -->
      <div>
        <el-checkbox @change="GLallSelect" style="padding-left:24px;" v-model="checkALl">全选</el-checkbox>
      </div>
      <el-tree :data="currentGxdata" show-checkbox ref="GLtree" node-key="id">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>
            <img v-if="data.icon" width="15px" style="height: 15px;font-size: 0;position: relative;" :src="data.icon" alt="">
            <span>{{ node.label }}</span>
          </span>
        </span>
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="glSelectvisible = false">取 消</el-button>
        <el-button type="primary" @click="comfireGL">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 移除关联选择具体对象 -->
    <el-dialog title="移除关联选择" :visible.sync="deleteglSelectvisible" width="30%">
      <!-- <div style="width:92%;margin:0 4%;margin-bottom: 15px;">
        <el-date-picker
          v-model="selectTimeStart"
          value-format="timestamp"
          type="date"
          placeholder="开始日期"
          style="width:49%">
        </el-date-picker>
        <el-date-picker
          v-model="selectTimeEnd"
          value-format="timestamp"
          type="date"
          placeholder="结束日期"
          style="width:49%">
        </el-date-picker>
      </div> -->
      <div>
        <el-checkbox @change="delGLallSelect" style="padding-left:24px;" v-model="checkALl">全选</el-checkbox>
      </div>
      <el-tree :data="currentGxdata" show-checkbox ref="delGLtree" node-key="id">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>
            <img v-if="data.icon" width="15px" style="height: 15px;font-size: 0;position: relative;" :src="data.icon" alt="">
            <span>{{ node.label }}</span>
          </span>
        </span>
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteglSelectvisible = false">取 消</el-button>
        <el-button type="primary" @click="comfiredelGL">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import cytoscape from 'cytoscape'
import echarts from 'echarts'
import {
  getGraph, // 获取关联图点线信息
  gettree, // 添加节点弹窗的树状图
  findOperateProperties, // 根据对象Uri获得该该对象下所有可操作的属性
  findLinkPropertiesByUri, // 根据该线Uri获得该线下所有可操作的属性
  saveExample, // 创建实例
  saveOrUpdate, //保存
  snapshot, // 生成快照
  getSnapshot, // 获取快照
  deletedSnap, // 删除快照
  getSnapDataById, //根据快照ID获取快照数据
  groupIdList, //根据groupId获取分组节点
  confirmEdge, //获取添加的节点与画布上的节点关系
  getdetail, // 实例详细信息
  propertySave, //新增属性
  propertyUpdate, //编辑属性
  LinepropertySave, //新增线属性
  LinepropertyUpdate, //修改边属性
  LinepropertyRemove, //删除线属性
  listRelationRoeKey, //关联关系返回所有并指定方向
  getOperateLinks, //获得本体编辑页面中所有可选关系
  saveLinkAndRelate2Objects, //新建一条关系，并关联到两个对象中
  saveEdge, //保存边
  relate2Objects, //保存现有边
  removeEdge, //删除边
  addInstance, //添加订阅实例
  deleteInstance, //从该分组删除
  groupCountFullText, //获取实体类型和动态类型
  listFullText, //获取列表数组
  filterListRelation, //右击关联数据
  getLinkDetail, //边的详情
  KZlistRelation //扩展
} from '@/api/relationFraph'

import { getInstance } from '@/api/workBench'
import { getsubscribeTree } from '@/api/workBench'
import util from '@/utils'
import Cookies from 'js-cookie'
import { formatDateTime, formatDate } from '@/utils/FormatDataH'
let edgehandles = require('cytoscape-edgehandles')
cytoscape.use(edgehandles)

export default {
    name: 'relationGraph',
    data () {
        return {
            // 时间筛选
            selectTimeStart: '',
            selectTimeEnd: '',
            // 是否显示删除边
            deleteLineShow: false,
            // 全选
            checkALl: false,
            // 所有的时间轴选项
            allTimeCheck: [],
            // 已经选择的时间轴选项
            checkedNames: [],
            checkedDefault: true,
            describe1: '',
            describeVisible1: false,
            editId: '',
            editDescription: '',
            timeStart: new Date(),
            timeEnd: new Date(),
            describeVisible: false,
            describe: '',
            editDes: false,
            dropData: [],
            chooseResultList: [],
            firstIndex: null,
            secondIndex: null,
            chooseResultList1: [],
            firstIndex1: null,
            secondIndex1: null,
            resultVisible: false,
            groupVisible: false,
            entryList: [], // 查询结果
            groupList: [], // 分组查询结果
            page_size: 20,
            page: 1,
            groupActive: null,
            resultVisible: false,
            objectTypeCount: '', // 实体属性类型
            objectListCountChoose: [], // 实体属性类型
            objectTypeDynamic: {}, // 事件属性类型
            objectListDynamicChoose: [], // 事件属性类型
            keywordVisible: true, // 全文检索字段
            objectListCount: [],
            objectListDynamic: [],
            keywords: '', // 全文检索字段
            searchParams: {
                curpage: 1,
                keywords: [],
                objectList: [],
                objectType: 'socialaccount',
                persize: 20,
                tags: []
            },

            groupCountFullTextParams: {
                keywords: [],
                tags: [],
                objectType: 'All',
                curpage: 1,
                persize: 10
            },
            focusgroup: [], // 组织
            keyfigures: [], // 人物
            socialaccount: [], // 账号
            dynamicCondition: [], // 动态
            document: [], // 文档
            media: [], // 多媒体
            addAttributeSHowName: '',
            objecturi: '', //
            rowkey: '',
            deleteLint: '', // 删除边
            showTimeLint: true,
            dataTime: [], // 时间
            dataData: [], // 数据
            chart: null,
            cyVisible: false, // 右击画布菜单
            nodesVisible: false, // 右击节点显示菜单
            showEdges: false,
            nodeBackground:
        'http://scistor.privatedcloud.com:10080/group1/M00/00/07/wKgf21wwTWaAZe_wAAABjHFGQ4k715.png',
            cyCanves: {
                top: null,
                left: null
            },
            relationList: [],
            visible: false,
            analyze: false,
            showCase: false,
            showOpacity: false,
            showCaseOpacity: false,
            showRelationOpacity: false,
            showRelations: false,
            form: {
                exampleName: ''
            },
            loadTreeList: [], // 获取分组Id
            activeNum: null,
            addNode: [], // 添加实体
            addNodesVisible: false, // 添加实体弹框显示
            addEdgesVisible: false, // 添加边弹框思显示
            showTree: false, // 新增节点加载树下拉框
            formRules: {
                exampleName: [
                    { required: true, message: '请选择对象', trigger: 'change' }
                ]
            },
            disabledIswho: false,
            showIsWho: false,
            showIsWhoVisible: false,
            createLoading: false,
            example: '',
            addnodeVisible: false, // 添加实例
            findOperateList: [],
            findOperateListModel: [],
            findOperateListModelAll: [],

            // 线的相关添加属性
            LinefindOperateList: [],
            LinefindOperateListModel: [],
            LinefindOperateListModelAll: [],
            showAddNode: false, // 显示创建实体
            layoutId: '', // 关联图id
            addAttribute: {}, // 添加属性
            addAttributeLine: {}, // 线添加属性
            addAttributeSave: {}, // 添加属性保存
            addAttributeLineSave: {}, // 添加线属性保存
            propertyList: [], // 详情获取属性值
            nodeId: '',
            nodeUri: '',
            targetUri: '',
            targetNode: '',
            getSnapshotList: [], // 获取快照
            snapshotActive: null, // 显示快照
            groupIdList: [], // 获取分组id集合
            cookiesList: [], // 获取cookies中的添加到关联图中的集合
            showDetails: false, // 显示详情
            saveName: '', // 显示类别
            nodesParmas: {}, // 点击节点对象信息
            showSelect: false, // 显示表单
            propertyType: 'add', // 属性新增还是修改
            LinepropertyType: 'add', // 线新增还是修改
            getRelationList: [],
            createRelationTemp: {
                relation: '0',
                linkUri: '',
                linkDTO: {
                    uri: '',
                    type: 'TwoWay',
                    displayname: '',
                    description: ''
                }
            },
            vindex: 0,
            firstKeyWord: '',
            secondKeyWord: '',
            canvasId: '',
            resultEdges: [],
            addGroup: false,
            addGroupName: '添加至该分组',
            historyName: '', // 选择历史数据
            groupDisplayName: '', // 分组名称
            timeLimeVisible: false,
            historyVisible: true,
            dragList: {},
            readOnlyParmas: {}, // 边是否能删除
            firstToGround: '',
            secendToGround: '',
            lineDetail: {}, // 当前边详情
            link_object: [], // 边详情的对象
            Link_id: '', // 边id
            isLineShow: false, // 当前展示信息是否是边的信息
            LinepropertyList: [], // 当前线的属性
            lineProtypoeoptions: [], // 边的属性列表
            showselectLineProtype: false, // 显示选择边的属性
            lineProtype: {}, // 线添加属性对象
            currentSelectNode: {}, // 当前选择的点
            glSelectvisible: false, // 关联选择框是否显示
            currentGxdata: [], // 关联选择框内数据
            glSelectType: '', // 关联选择的类型
            nodeiskuozhan: false, // 节点是否显示扩展收缩选项
            allSXData: new Map(), // 存储所有的收缩数据
            SXSource: [], // 当前收缩扩展的source
            sxData: {
                line: [], // 收缩二级新创建的所有线
                source: '', // 当前收缩的对象
                LDNode: [], // 收缩
                LDLine: [] // 收缩一级删除的线
            }, // 当前点可收缩边的data
            // 移除关联选择框是否显示
            deleteglSelectvisible: false,
            delglSelectType: '', // 删除关联选择的类型,
            // 相关实体选择的分类
            selectsocialaccount: '',
            // 相关实体选择分类
            selectdynamicCondition: ''

        }
    },
    mounted () {
        let vm = this
        let el = document.getElementById('result')
        el.addEventListener('scroll', this.handleScroll)

        let el1 = document.getElementById('groupResult')
        el1.addEventListener('scroll', this.handleScroll1)

        // vm.$nextTick(() => {
        //     vm.initChart()
        // })

        vm.cy = cytoscape({
            container: document.getElementById('relationBox'),
            boxSelectionEnabled: true,
            autounselectify: true,
            motionBlur: !1,
            maxZoom: 5,
            minZoom: 0.1,
            zoom: 0.5,
            wheelSensitivity: 1, // 滑动滚轮一次缩放大小
            textureOnViewport: !1,
            style: [
                {
                    selector: 'node',
                    style: {
                        content: function (ele) {
                            return (
                                ele.data('showName') ||
                ele.data('displayName') ||
                ele.data('name')
                            )
                        },
                        width: function (a) {
                            return a.data('type') == 'Company' ? 60 : 45
                        },
                        height: function (a) {
                            return a.data('type') == 'Company' ? 60 : 45
                        },
                        'background-color': function (a) {
                            return !a.data('target')
                                ? '#47D2AC'
                                : a.data('type') == 'Company'
                                    ? '#2196F4'
                                    : '#EAA829'
                        },
                        color: '#333',
                        'border-color': function (a) {
                            return !a.data('target')
                                ? '#47D2AC'
                                : a.data('type') == 'Company'
                                    ? '#2196F4'
                                    : '#EAA829'
                        },
                        'border-radius': '5px',
                        'border-width': 1,
                        'text-wrap': 'wrap',
                        'font-size': 10,
                        'font-family': 'microsoft yahei',
                        'overlay-color': '#fff',
                        'overlay-opacity': 0,
                        'shape-polygon-points': (10, 10),
                        'background-opacity': 1,
                        shape: 'ellipse',
                        'z-index-compare': 'auto',
                        'background-fit': 'contain contain'
                    }
                },
                {
                    selector: 'edge',
                    style: {
                        // 添加箭头
                        'line-style': function (a) {
                            return 'solid'
                        },
                        'curve-style': 'bezier',
                        'control-point-step-size': 20,
                        'target-arrow-shape': 'triangle',
                        'target-arrow-color': function (a) {
                            // return a.data("color")
                            return '#DCDCDC'
                        },
                        'arrow-scale': 0.5,
                        'line-color': function (a) {
                            // return a.data("color")
                            return '#DCDCDC'
                        },
                        label: function (a) {
                            return a.data('label')
                        },
                        'text-opacity': 0.8,
                        'font-size': 10,
                        'background-color': function (a) {
                            return '#333'
                        },
                        width: 3,
                        'overlay-color': '#fff',
                        'overlay-opacity': 0,
                        'font-family': 'microsoft yahei',
                        'z-index-compare': 'auto'
                    }
                },
                {
                    selector: ':selected',
                    style: {
                        'border-width': 2,
                        'border-color': '#333',
                        'background-color': 'black',
                        'line-color': 'black',
                        'target-arrow-color': 'black',
                        'source-arrow-color': 'black'
                    }
                },
                {
                    selector: '.nodeHover', // 节点变暗，有悬停效果
                    style: {
                        shape: 'ellipse',
                        'background-opacity': 0.8
                    }
                },
                {
                    selector: '.nodeActive',
                    style: {
                        'border-color': '#4EA2F0',
                        'border-width': 10,
                        'border-opacity': 0.5
                    }
                },
                {
                    selector: '.edgeShow',
                    style: {
                        color: '#999',
                        'text-opacity': 1,
                        'font-weight': 400,
                        label: function (a) {
                            return a.data('label')
                        },
                        'font-size': 10,
                        'arrow-scale': 0.8,
                        width: 1.5,
                        'source-text-margin-y': 20,
                        'target-text-margin-y': 20
                    }
                },
                {
                    selector: '.edgeActive',
                    style: {
                        'arrow-scale': 0.8,
                        width: 1.5,
                        color: '#330',
                        'text-opacity': 1,
                        'font-size': 10,
                        'text-background-color': '#fff',
                        'text-background-opacity': 0.8,
                        'text-background-padding': 0,
                        'source-text-margin-y': 20,
                        'target-text-margin-y': 20,
                        'z-index-compare': 'manual',
                        'z-index': 1,
                        'line-color': function (a) {
                            // 直线颜色
                            return '#4EA2F0'
                        },
                        'target-arrow-color': function (a) {
                            // 箭头颜色
                            return '#4EA2F0'
                        },
                        label: function (a) {
                            return a.data('label')
                        }
                    }
                },
                {
                    selector: '.edgeDrag',
                    style: {
                        'arrow-scale': 0.8,
                        width: 1.5,
                        color: '#330',
                        'text-opacity': 1,
                        'font-size': 10,
                        'text-background-color': '#fff',
                        'text-background-opacity': 0.8,
                        'text-background-padding': 0,
                        'source-text-margin-y': 20,
                        'target-text-margin-y': 20,
                        'z-index-compare': 'manual',
                        'z-index': 1,
                        'line-color': function (a) {
                            // 直线颜色
                            return '#4EA2F0'
                        },
                        'target-arrow-color': function (a) {
                            // 箭头颜色
                            return '#4EA2F0'
                        }
                    }
                },
                {
                    selector: '.dull',
                    style: {
                        'z-index': 1,
                        opacity: 0.2
                    }
                },
                {
                    selector: '.nodeselect',
                    style: {
                        'z-index': 1,
                        padding: '5px',
                        'border-color': '#4EA2F0',
                        'border-width': 10
                    }
                },
                {
                    selector: '.nodeClass',
                    style: {
                        shape: 'round-rectangle',
                        'background-color': '#28478D',
                        color: '#333',
                        'border-color': '#28478D'
                    }
                },
                {
                    selector: '.eh-handle',
                    style: {
                        width: 0,
                        height: 0,
                        shape: 'ellipse',
                        'overlay-opacity': 0,
                        'border-opacity': 0
                    }
                },

                {
                    selector: '.eh-hover',
                    style: {
                        shape: 'round-rectangle',
                        'background-color': '#28478D',
                        color: '#333',
                        'border-color': '#28478D'
                    }
                },

                {
                    selector: '.eh-source',
                    style: {
                        shape: 'round-rectangle',
                        'background-color': '#28478D',
                        color: '#333',
                        'border-color': '#28478D'
                    }
                },

                {
                    selector: '.eh-target',
                    style: {
                        shape: 'round-rectangle',
                        'background-color': '#28478D',
                        color: '#333',
                        'border-color': '#28478D'
                    }
                },

                {
                    selector: '.eh-preview, .eh-ghost-edge',
                    style: {
                        'background-color': 'red',
                        'line-color': 'red',
                        'target-arrow-color': 'red',
                        'source-arrow-color': 'red',
                        'line-style': 'dotted'
                    }
                },

                {
                    selector: '.eh-ghost-edge.eh-preview-active',
                    style: {
                        opacity: 0
                    }
                }
            ],
            elements: {
                nodes: [],
                edges: []
            },
            layout: {
                name: 'cose', // 用哪种方式排列，可选：breadthfirst(广度优先)、cose(缝制，乱交)、preset(预设)、circle(圆形)、grid(矩形)
                idealEdgeLength: 60,
                nodeOverlap: 20,
                refresh: 20,
                fit: true,
                padding: 30,
                randomize: false,
                componentSpacing: 20,
                nodeRepulsion: 400,
                edgeElasticity: 10,
                nestingFactor: 5,
                animate: true, // 出来动画
                gravity: 80,
                numIter: 1000,
                initialTemp: 200,
                coolingFactor: 0.95,
                minTemp: 1.0
            }
        })
        let defaults = {
            preview: true, // whether to show added edges preview before releasing selection
            hoverDelay: 150, // time spent hovering over a target node before it is considered selected
            handleNodes: 'node', // selector/filter function for whether edges can be made from a given node
            snap: false, // when enabled, the edge can be drawn by just moving close to a target node (can be confusing on compound graphs)
            snapThreshold: 50, // the target node must be less than or equal to this many pixels away from the cursor/finger
            snapFrequency: 15, // the number of times per second (Hz) that snap checks done (lower is less expensive)
            noEdgeEventsInDraw: false, // set events:no to edges during draws, prevents mouseouts on compounds
            disableBrowserGestures: false, // during an edge drawing gesture, disable browser gestures such as two-finger trackpad swipe and pinch-to-zoom
            handlePosition: function (node) {
                return 'middle top' // sets the position of the handle in the format of "X-AXIS Y-AXIS" such as "left top", "middle top"
            },
            handleInDrawMode: false, // whether to show the handle in draw mode
            edgeType: function (sourceNode, targetNode) {
                // can return 'flat' for flat edges between nodes or 'node' for intermediate node between them
                // returning null/undefined means an edge can't be added between the two nodes
                return 'flat'
            },
            loopAllowed: function (node) {
                // for the specified node, return whether edges from itself to itself are allowed
                return false
            },
            nodeLoopOffset: -50, // offset for edgeType: 'node' loops
            nodeParams: function (sourceNode, targetNode) {
                // for edges between the specified source and target
                // return element object to be passed to cy.add() for intermediary node
                return {}
            },
            edgeParams: function (sourceNode, targetNode, i) {
                // for edges between the specified source and target
                // return element object to be passed to cy.add() for edge
                // NB: i indicates edge index in case of edgeType: 'node'
                return {}
            },
            ghostEdgeParams: function () {
                // return element object to be passed to cy.add() for the ghost edge
                // (default classes are always added for you)
                return {}
            },
            show: function (sourceNode) {
                // fired when handle is shown
            },
            hide: function (sourceNode) {
                // fired when the handle is hidden
            },
            start: function (sourceNode) {
                vm.cy.panningEnabled(false)
                vm.cy.userPanningEnabled(true)
                // fired when edgehandles interaction starts (drag on handle)
            },
            complete: function (sourceNode, targetNode, addedEles) {
                // fired when edgehandles is done and elements are added
            },
            stop: function (sourceNode) {
                // fired when edgehandles interaction is stopped (either complete with added edges or incomplete)
            },
            cancel: function (sourceNode, cancelledTargets) {
                // fired when edgehandles are cancelled (incomplete gesture)
            },
            hoverover: function (sourceNode, targetNode) {
                // fired when a target is hovered
            },
            hoverout: function (sourceNode, targetNode) {
                // fired when a target isn't hovered anymore
            },
            previewon: function (sourceNode, targetNode, previewEles) {
                // fired when preview is shown
            },
            previewoff: function (sourceNode, targetNode, previewEles) {
                // fired when preview is hidden
            },
            drawon: function () {
                // fired when draw mode enabled
            },
            drawoff: function () {
                // fired when draw mode disabled
            }
        }
        vm.eh = vm.cy.edgehandles(defaults)
        vm.cy.collection('edge').addClass('edgeShow')

        vm.cy.on('mouseover', 'node', function (a) {
            $('#relationBox').css('cursor', 'pointer')
            let c = a.target
            c.addClass('nodeHover')
            vm.cy.collection('edge').removeClass('edgeActive')
            c.neighborhood('edge').addClass('edgeActive')
        })
        vm.cy.on('mouseout', 'node', function (a) {
            $('#relationBox').css('cursor', 'default')
            let c = a.target
            c.removeClass('nodeHover')
            vm.cy.collection('edge').removeClass('edgeActive')
        })
        vm.cy.on('click', 'node', function (a) {
            let c = a.target
            if ([...c._private.classes].includes('dull')) {
                return
            }
            if (c.data().belongGroup != 'socialdynamic') {
                vm.showIsWho = true
            } else {
                vm.showIsWho = false
            }
            vm.deleteId = c.id()
            if (vm.nodeId) {
                if (vm.showEdges) {
                    vm.addEdgesVisible = true
                }
                vm.targetNode = c.id()
                vm.secendToGround = c.data().belongGroup
                vm.targetUri = c.data()['objecturi']
                vm.secondKeyWord = c.data()['rowkey']
                vm.cyCanves.top = vm.cy.$(`#${vm.targetNode}`).renderedPosition('y') + 5
                vm.cyCanves.left =
          vm.cy.$(`#${vm.targetNode}`).renderedPosition('x') - 124
                vm.createRelationTemp = {
                    relation: '0',
                    linkUri: '',
                    linkDTO: {
                        uri: '',
                        type: 'TwoWay',
                        displayname: '',
                        description: ''
                    }
                }
                vm.vindex = 0
                vm.handleGetRelations()
            } else {
                vm.nodeId = c.id()
                vm.firstToGround = c.data().belongGroup
                vm.nodeUri = c.data()['objecturi']
                vm.firstKeyWord = c.data()['rowkey']
            }
            if (vm.nodeId && vm.targetNode) {
                if (vm.disabledIswho) {
                    if (vm.handleVerify(vm.firstToGround, vm.secendToGround)) {
                        vm.disabledIswho = true
                        vm.showIsWho = true
                    } else {
                        vm.showIsWho = false
                        vm.disabledIswho = false
                        vm.addEdgesVisible = false
                    }
                }
                if (vm.addEdgesVisible) {
                    vm.showEdges = false
                }
                if (vm.nodeId == vm.targetNode) {
                    vm.nodeId = ''
                    vm.targetNode = ''
                    vm.addEdgesVisible = false
                    vm.showEdges = false
                    vm.vindex = 0
                    return
                }
            }
            c.removeClass('nodeActive')
            vm.cy.collection('node').removeClass('nodeClass')
            c.addClass('nodeClass')
            vm.cy.collection('edge').removeClass('edgeActive')
        })
        vm.cy.on('vmousedown', 'node', function (a) {
            // 监听鼠标左键按下
            let c = a.target
            if ([...c._private.classes].includes('dull')) {
                return
            }
            vm.cy.collection('edge').addClass('dull')
            vm.cy.collection('node').addClass('dull')
            c.removeClass('dull')
            c.neighborhood('edge').removeClass('dull')
            c.neighborhood('edge').addClass('edgeActive')
            c.neighborhood('edge')
                .connectedNodes()
                .removeClass('dull') // 当前节点的邻域边的边缘节点！

            // c.neighborhood("node").removeClass("dull");//与上面意义相同
        })

        vm.cy.on('tapend', 'node', function (a) {
            // 监听鼠标左键释放
            let c = a.target
            if ([...c._private.classes].includes('dull')) {
                return
            }
            vm.isLineShow = false
            vm.cy.collection('edge').removeClass('dull')
            vm.cy.collection('node').removeClass('dull')
            c.neighborhood('edge').removeClass('edgeActive')
            c.neighborhood('node').removeClass('nodeActive')
            // if (vm.cy.$(`#${c.id()}`).selected()){
            //   console.log(111)
            // } else {
            //   console.log(2222)
            // }
            vm.showDetails = true
            vm.rowkey = c.data().rowkey
            vm.objecturi = c.data().objecturi
            vm.addAttributeSHowName = c.data()
            vm.saveName = c.data().name
            vm.nodesParmas = c.data()
            vm.getNodeDetails(c.data().rowkey, c.data().objecturi)
            vm.handleDynamicCondition('socialdynamic')
            vm.handleFocusgroup('focusgroup')
            vm.handleKeyfigures('keyfigures')
            vm.handleAccountNumber('socialaccount')
            // 获取文档
            vm.handleDocument('document')
            // 获取多媒体
            vm.handleMedia('media')
            vm.showSelect = false
            vm.addAttributeSave = {}
            vm.addAttribute.propertyType = ''
            vm.addAttribute = {}
        })

        vm.cy.on('dragfree', 'node', function (a) {
            if (vm.showDetails) {
                vm.showDetails = false
            }
        })

        // 线
        vm.cy.on('tapstart', 'edge', function (a) {
            let c = a.target
            vm.readOnlyParmas = c.data()
            vm.deleteLint = c.data().id
            vm.cy.collection('edge').removeClass('edgeActive')
            c.addClass('edgeActive')
        })
        // 监听线的点击事件
        vm.cy.on('click', 'edge', function (a) {
            vm.deleteLineShow = true
            let c = a.target
            vm.isLineShow = true
            vm.showDetails = true
            getLinkDetail({ linkId: c.data().id }).then(res => {
                if (res.status == 200) {
                    console.log(res)
                    vm.showselectLineProtype = false
                    vm.link_object = res.data.objects
                    vm.Link_id = c.data().id
                    //  当前得详细信息
                    vm.lineDetail = res.data.edge
                    //  todosome
                    vm.LinepropertyList = res.data.linkPropertys
                        ? res.data.linkPropertys
                        : []
                }
            })
            // vm.showSelect = false;
            // vm.addAttributeSave = {};
            // vm.addAttribute.propertyType = '';
            // vm.addAttribute = {};
        })
        // 清空线和点class
        vm.cy.on('tapstart', function (a) {
            vm.cyVisible = false
            vm.addNodesVisible = false
            vm.addEdgesVisible = false
            vm.showTree = false
            if (a.target === vm.cy) {
                ;(vm.readOnlyParmas = {}),
                vm.cy.collection('node').removeClass('nodeClass')
                vm.cy.collection('edge').removeClass('edgeActive')
                vm.showEdges = false
                vm.cyVisible = false
                vm.nodesVisible = false
                // vm.resultVisible = false;
                // vm.visible = false;
                vm.deleteLint = ''
                // showCaseOpacity showRelationOpacity visible showCase showRelations
                // vm.showOpacity = false;
                // vm.showCaseOpacity = false;
                vm.showRelationOpacity = false
                // vm.showCase = false;
                // vm.showRelations = false;
                vm.nodeId = ''
                vm.targetNode = ''
                vm.showDetails = false
                vm.targetUri = ''
                vm.secondKeyWord = ''
                vm.createRelationTemp = {
                    relation: '0',
                    linkUri: '',
                    linkDTO: {
                        uri: '',
                        type: 'TwoWay',
                        displayname: '',
                        description: ''
                    }
                }
                vm.vindex = 0
                vm.nodeUri = ''
                vm.firstKeyWord = ''
            }
        })

        // 右击显示菜单
        vm.cy.on('cxttapstart', function (e) {
            let c = e.target
            vm.cyVisible = true
            vm.findOperateListModel = []
            vm.findOperateListModelAll = []
            vm.findOperateList = []
            vm.example = ''
            vm.form.exampleName = ''
            if (e.target === vm.cy) {
                vm.cyVisible = true
                vm.nodesVisible = false
                vm.addNodesVisible = false
                vm.showTree = false
                vm.deleteLint = ''
            } else {
                if (c.data().belongGroup != 'socialdynamic') {
                    vm.showIsWho = true
                } else {
                    vm.showIsWho = false
                }
                vm.cyVisible = false
                vm.nodesVisible = true
                vm.addNodesVisible = false
                vm.showTree = false
                // vm.deleteLint = '';
            }
        })
        // 右击节点显示菜单
        vm.cy.on('cxttapstart', 'node', function (e) {
            let c = e.target
            vm.deleteLineShow = false
            vm.deleteId = c.id()
            vm.nodeId = c.id()
            vm.firstToGround = c.data().belongGroup
            console.log(c.data())
            // 判断右击节点是否是组织或者人物 (只有组织或者人物才有扩展收缩选项)
            if (
                c.data().belongGroup == 'focusgroup' ||
        c.data().belongGroup == 'keyfigures'
            ) {
                vm.nodeiskuozhan = true
                // let location = vm.cy.$(`#${c.data().rowkey}`).position()
                // vm.sxData.LDposition = {x:location.x,y:location.y}
                // vm.sxData.source = c.data().rowkey
                // vm.sxData.LDLine = []
                // vm.sxData.LDNode = []
                // // 遍历当前选中点相关的边
                // console.log(c.neighborhood("edge"))
                // for(let item of Array.from(c.neighborhood("edge"))){
                //   console.log(item._private)
                //   // 当存在落地的情况下可收缩
                //   if(item._private.data.name == '落地'){
                //     let targetData = (c.data().rowkey == item._private.data.target ? item._private.data.source : item._private.data.target)
                //     vm.sxData.LDLine.push(item._private.data.id)
                //     vm.sxData.LDNode.push(targetData)
                //   }
                // }
                // let sxData = {
                //   source:c.data().rowkey,
                //   line:[],
                //   LDLine:[],
                //   LDNode:[],
                // }
                // 保存当前收缩扩展的source
                vm.SXSource = []
                vm.SXSource.push(c.data().rowkey)
                // // vm.SXSource.push(c.data().rowkey)
                // for(let item of Array.from(c.neighborhood("edge"))){
                //   // 是否存在落地边
                //   if(item._private.data.name == '落地'){
                //     console.log('能够收缩')
                //     vm.SXSource.push(c.data().rowkey)
                //     break
                //   }
                // }
                console.log(vm.SXSource)
                console.log(vm.allSXData)
            } else {
                vm.nodeiskuozhan = false
            }
            vm.nodeUri = c.data()['objecturi']
            vm.firstKeyWord = c.data()['rowkey']
            vm.findOperateListModel = []
            vm.findOperateListModelAll = []
            vm.findOperateList = []
            vm.example = ''
            vm.deleteLint = ''
            vm.form.exampleName = ''
            vm.cyCanves.top = vm.cy.$(this).renderedPosition('y') + 5
            vm.cyCanves.left = vm.cy.$(this).renderedPosition('x') + 5
            vm.nodesVisible = true
            vm.cyVisible = false
            vm.addNodesVisible = false
            vm.showTree = false
            vm.nodesParmas = c.data()

            vm.rowkey = c.data().rowkey
            vm.objecturi = c.data().objecturi

            vm.showDetails = false
            vm.rowkey = c.data().rowkey
            vm.objecturi = c.data().objecturi
            vm.addAttributeSHowName = c.data()
            vm.saveName = c.data().name
            vm.nodesParmas = c.data()
            vm.getNodeDetails(c.data().rowkey, c.data().objecturi)
            vm.handleDynamicCondition('socialdynamic')
            vm.handleFocusgroup('focusgroup')
            vm.handleKeyfigures('keyfigures')
            vm.handleAccountNumber('socialaccount')
            // 获取文档
            vm.handleDocument('document')
            // 获取多媒体
            vm.handleMedia('media')
            vm.nodesVisible = true
            vm.showSelect = false
            vm.addAttributeSave = {}
            vm.addAttribute.propertyType = ''
            vm.addAttribute = {}
            vm.currentSelectNode = c.data()
        })

        vm.cy.on('keyup', 'node', function (a) {
            let c = a.target
            console.log(a)
        })
    },
    methods: {
    // 选择实体分类
    // selectsocialaccountType(){
    //   this.selectedsocialaccountData = []
    // },

    // 时间轴属性选择
        changeselect () {
            this.filterLineData(this.checkedNames)
        },
        // 时间轴过滤
        async filterLineData (value) {
            let vm = this
            vm.dataTime = []
            vm.dataData = []
            let allCyData = this.cy.json()

            let newallCyData = []
            let xData = []
            let yData = []
            let newxData = []
            let currentTimeCheck = []
            let DataMap = new Map()
            if (allCyData.elements.edges) {
                newallCyData = [...allCyData.elements.edges]
                if (allCyData.elements.nodes) {
                    newallCyData = [...newallCyData, ...allCyData.elements.nodes]
                }
            }
            console.log(newallCyData)
            if (newallCyData && newallCyData.length > 0) {
                for (let item of newallCyData) {
                    // 如果是线
                    if (item.group == 'edges' && item.data.starttime) {
                        if (value.includes(item.data.name)) {
                            if (!xData.includes(item.data.starttime)) {
                                // 往x轴添加属性
                                console.log(item.data.starttime)
                                xData.push(item.data.starttime)
                                let num = DataMap.get(item.data.starttime)
                                    ? DataMap.get(item.data.id).push()
                                    : [item.data.id]
                                DataMap.set(item.data.starttime, num)
                            } else {
                                if (DataMap.get(item.data.starttime)) {
                                    DataMap.get(item.data.starttime).push(item.data.id)
                                }
                            }
                        }
                    } else if (item.group == 'nodes' && item.data.objecturi) {
                        let result = await getdetail({
                            rowkey: item.data.rowkey,
                            objectUri: item.data.objecturi
                        })
                        // getdetail({rowkey:item.data.rowkey,objectUri:item.data.objecturi}).then((res)=>{
                        for (let list of result.data.propertyList) {
                            if (value.includes(list.propertyName)) {
                                // 如果对象存在时间属性
                                if (list.propertyType == 'TimeInterval') {
                                    // 当前时间已经存在
                                    let cv = new Date(
                                        list.propertyValues[0].value.timeStart
                                    ).valueOf()
                                    console.log(cv)
                                    if (!xData.includes(cv)) {
                                        console.log(list.propertyValues[0].value.timeStart)
                                        xData.push(cv)
                                        let num = DataMap.get(cv)
                                            ? DataMap.get(item.data.id).push()
                                            : [item.data.id]
                                        DataMap.set(cv, num)
                                    } else {
                                        if (DataMap.get(cv)) {
                                            DataMap.get(cv).push(item.data.id)
                                        }
                                    }
                                } else if (list.propertyType == 'DateTime') {
                                    let cv1 = new Date(list.propertyValues[0].value).valueOf()
                                    if (!xData.includes(cv1)) {
                                        console.log(list.propertyValues[0].value)
                                        xData.push(cv1)
                                        let num = DataMap.get(cv1)
                                            ? DataMap.get(item.data.id).push()
                                            : [item.data.id]
                                        DataMap.set(cv1, num)
                                    } else {
                                        if (DataMap.get(cv1)) {
                                            DataMap.get(cv1).push(item.data.id)
                                        }
                                    }
                                }
                            }
                        }
                        // })
                    }
                }
                console.log(xData)
                // 排序
                xData.sort((a, b) => a - b)
                // 初始值
                for (let self of xData) {
                    newxData.push(util.timestampToTime(self))
                    yData.push(DataMap.get(self).length)
                }
                console.log(yData)
                this.dataTime = newxData
                this.dataData = yData
                // this.allTimeCheck = currentTimeCheck
                // this.checkedNames = this.allTimeCheck

                vm.initChart()
                if (this.chart) {
                    setTimeout(() => {
                        this.chart.resize()
                    }, 150)
                    this.chart.on('brushSelected', function (params) {
                        console.log(params.batch[0].areas)
                        if (params.batch[0].areas.length != 0) {
                            let start = new Date(
                                vm.dataTime[params.batch[0].areas[0].coordRange[0]].replace(
                                    /-/g,
                                    '/'
                                )
                            ).getTime()
                            let end = new Date(
                                vm.dataTime[params.batch[0].areas[0].coordRange[1]].replace(
                                    /-/g,
                                    '/'
                                )
                            ).getTime()
                            if (allCyData.elements.edges.length != 0) {
                                vm.cy.collection('edge').removeClass('edgeActive')
                                for (let j = 0; j < allCyData.elements.edges.length; j++) {
                                    let curretnIndex = allCyData.elements.edges[j]
                                    let timeFormat = formatDateTime(curretnIndex.data.starttime)
                                    let timeDate = new Date(
                                        timeFormat.replace(/-/g, '/')
                                    ).getTime()
                                    if (timeDate >= start && timeDate <= end) {
                                        vm.cy.$(`#${curretnIndex.data.id}`).addClass('edgeActive')
                                    }
                                }
                            }
                        }
                        // if (params.batch[0]) {
                        //   console.log(params.batch[0].areas[0].coordRanges)
                        // }
                    })
                }
            }
        },
        // 扩展
        kuozhan1 () {
            this.nodesVisible = false
            console.log('kuozhan')
            let params = {
                spreadRowkeys: [this.sxData.source],
                spread: true
            }
            console.log(this.sxData.line)
            // 删除所有二级连接
            for (let item of this.sxData.line) {
                this.cy.remove(this.cy.$(`#${item.data.id}`))
            }
            // 扩展新建一级
            KZlistRelation(params).then(res => {
                console.log(res)

                for (let item of res.data) {
                    this.cy.add({
                        group: 'nodes',
                        data: {
                            id: item.rowkey,
                            displayname: item.displayName,
                            name: item.name,
                            showName: item.showName,
                            image: item.iconUrl,
                            objecttype: item.objectType,
                            objecturi: item.objectUri,
                            rowkey: item.rowkey,
                            twoway: item.path,
                            belongGroup: item.belongGroup
                        },
                        position: { x: 300, y: 400 }
                    })
                    this.cy.add({
                        group: 'edges',
                        data: {
                            id: item.linkId,
                            source: this.sxData.source,
                            target: item.rowkey,
                            name: item.linkName,
                            linkuri: item.linkuri,
                            endtime: item.endtime,
                            starttime: item.starttime,
                            twoway: item.path,
                            readOnly: item.readOnly
                        }
                    })
                }
                setTimeout(() => {
                    // 新建二级
                    for (let item of this.sxData.line) {
                        console.log(item.data.source)
                        this.cy.add({
                            group: 'edges',
                            data: {
                                id: item.data.id,
                                source: item.data.source,
                                target: item.data.target,
                                name: item.data.name,
                                linkuri: item.data.linkuri,
                                endtime: item.data.endtime,
                                starttime: item.data.starttime,
                                twoway: item.data.twoway,
                                readOnly: item.data.readOnly
                            }
                        })
                    }
                    this.handeleChooseLayout('breadthfirst')
                }, 0)
            })
        },
        allKZ () {
            this.cyVisible = false
            this.kuozhan()
        },
        kuozhan () {
            console.log(this.SXSource)
            for (let self of this.SXSource) {
                console.log(this.allSXData.get(self))
                if (!this.allSXData.get(self)) {
                    return false
                }
                // 当前节点是否能够扩展
                let isKZ = false
                let params = {
                    spreadRowkeys: [self],
                    spread: true
                }
                KZlistRelation(params).then(res => {
                    for (let item of res.data) {
                        console.log(item)
                        if (item.linkUri == 'com.scistor.link.iswho') {
                            console.log('当前可拓展')
                            isKZ = true
                        }
                    }
                    console.log(isKZ)
                    if (isKZ) {
                        this.kuozhancommon()
                    } else {
                    }
                })
            }
        },
        kuozhancommon () {
            this.nodesVisible = false
            if (this.allSXData.size > 0) {
                for (let _sx of this.allSXData.values()) {
                    let params = {
                        spreadRowkeys: [_sx.source],
                        spread: true
                    }
                    // 删除所有二级连接
                    for (let item of _sx.line) {
                        console.log(item)
                        this.cy.remove(this.cy.$(`#${item.data.id}`))
                    }
                    // 扩展新建一级
                    KZlistRelation(params).then(res => {
                        console.log(res)

                        for (let item of res.data) {
                            this.cy.add({
                                group: 'nodes',
                                data: {
                                    id: item.rowkey,
                                    displayname: item.displayName,
                                    name: item.name,
                                    showName: item.showName,
                                    image: item.iconUrl,
                                    objecttype: item.objectType,
                                    objecturi: item.objectUri,
                                    rowkey: item.rowkey,
                                    twoway: item.path,
                                    belongGroup: item.belongGroup
                                },
                                position: { x: 300, y: 400 }
                            })
                            this.cy.add({
                                group: 'edges',
                                data: {
                                    id: item.linkId,
                                    source: _sx.source,
                                    target: item.rowkey,
                                    name: item.linkName,
                                    linkuri: item.linkuri,
                                    endtime: item.endtime,
                                    starttime: item.starttime,
                                    twoway: item.path,
                                    readOnly: item.readOnly
                                }
                            })
                        }
                        setTimeout(() => {
                            console.log(_sx.line)
                            // 新建二级
                            for (let item of _sx.line) {
                                if (
                                    this.cy.$(`#${item.data.source}`).length > 0 &&
                  this.cy.$(`#${item.data.target}`).length > 0
                                ) {
                                    this.cy.add({
                                        group: 'edges',
                                        data: {
                                            id: item.data.id,
                                            source: item.data.source,
                                            target: item.data.target,
                                            name: item.data.name,
                                            linkuri: item.data.linkuri,
                                            endtime: item.data.endtime,
                                            starttime: item.data.starttime,
                                            twoway: item.data.twoway,
                                            readOnly: item.data.readOnly
                                        }
                                    })
                                }
                            }
                            this.handeleChooseLayout('breadthfirst')
                            // // 赋值为空
                            this.allSXData.delete(_sx.source)
                        }, 0)
                    })
                }
            }
        },
        // 全局收缩
        allSX () {
            this.cyVisible = false
            this.SXSource = []
            // 判断全局是否有收缩对象
            for (let item of Array.from(this.cy.collection('node'))) {
                if (
                    item._private.data.belongGroup == 'focusgroup' ||
          item._private.data.belongGroup == 'keyfigures'
                ) {
                    for (let list of Array.from(
                        this.cy.$(`#${item._private.data.id}`).neighborhood('edge')
                    )) {
                        if (list._private.data.name == '落地') {
                            console.log(item)
                            this.SXSource.push(item._private.data.rowkey)
                            break
                        }
                    }
                    // vm.sxData.source = c.data().rowkey
                    // vm.SXSource.push(c.data().rowkey)
                }
            }
            this.shousuo()
        },
        // 收缩
        shousuo1 () {
      this.nodesVisible = false
      this.sxData.line = []
      console.log(this.sxData)
      // 判断是否有收缩的
      if (this.sxData.LDLine.length > 0) {
        // 隐藏落地关系的线
        for (let item of this.sxData.LDLine) {
          // this.cy.$(`#${item}`).addClass('noneShow')
          this.cy.remove(this.cy.$(`#${item}`))
        }
        // 根据rowkey 隐藏点
        console.log(this.cy.collection('node'))
        for (let item of Array.from(this.cy.collection('node'))) {
          if (this.sxData.LDNode.includes(item._private.data.rowkey)) {
            console.log(item._private.data.rowkey)
            let currentedges = Array.from(
              this.cy.$(`#${item._private.data.rowkey}`).neighborhood('edge')
            )
            console.log(currentedges)
            // 删除落地对象
            this.cy.remove(this.cy.$(`#${item._private.data.rowkey}`))
            setTimeout(() => {
              for (let list of currentedges) {
                console.log(list)
                let currentData = []
                let currentData1 = []
                currentData = {
                  group: 'edges',
                  data: {
                    id: list._private.data.id,
                    source: '',
                    target: '',
                    name: list._private.data.name,
                    linkuri: list._private.data.linkuri,
                    endtime: list._private.data.endtime,
                    starttime: list._private.data.starttime,
                    twoway: list._private.data.twoway,
                    readOnly: list._private.data.readOnly
                  }
                }
                currentData1 = {
                  group: 'edges',
                  data: {
                    id: list._private.data.id,
                    source: '',
                    target: '',
                    name: list._private.data.name,
                    linkuri: list._private.data.linkuri,
                    endtime: list._private.data.endtime,
                    starttime: list._private.data.starttime,
                    twoway: list._private.data.twoway,
                    readOnly: list._private.data.readOnly
                  }
                }
                if (list._private.data.target == item._private.data.rowkey) {
                  currentData.data.source = list._private.data.source
                  currentData.data.target = this.sxData.source
                } else if (
                  item._private.data.rowkey == list._private.data.source
                ) {
                  currentData.data.source = this.sxData.source
                  currentData.data.target = list._private.data.target
                }
                if (list._private.data.target == item._private.data.rowkey) {
                  currentData1.data.source = list._private.data.source
                  currentData1.data.target = item._private.data.rowkey
                } else if (
                  item._private.data.rowkey == list._private.data.source
                ) {
                  currentData1.data.source = item._private.data.rowkey
                  currentData1.data.target = list._private.data.target
                }
                //  保存需要删除的二级线
                this.sxData.line.push(currentData1)
                this.cy.add(currentData)
              }
            }, 100)
            //  this.cy.remove(this.cy.$(`#${item._private.data.rowkey}`))
            // this.cy.$(`#${item._private.data.rowkey}`).style('zIndex',-200)
            // console.log( this.cy.$(`#${item._private.data.rowkey}`).style())
            // vm.cy.remove(vm.cy.$(`#${item._private.data.rowkey}`))
          }
        }
      } else {
        this.$message.info('无可收缩对象')
        
      }
    },
        shousuo () {
            // 清除收缩数据
            // this.allSXData.clear()
            // 遍历需要收缩的对象
            console.log(this.SXSource)
            console.log(this.allSXData)
            for (let self of this.SXSource) {
                console.log('000')
                let sxData = {
                    source: self,
                    LDLine: [],
                    LDNode: []
                }
                for (let item of Array.from(
                    this.cy.$(`#${self}`).neighborhood('edge')
                )) {
                    // 当有落地的时候确认该对象能收缩
                    if (item._private.data.name == '落地') {
                        console.log(1111)
                        let targetData =
              self == item._private.data.target
                  ? item._private.data.source
                  : item._private.data.target
                        sxData.LDLine.push(item._private.data.id)
                        sxData.LDNode.push(targetData)
                    }
                }
                //
                if (this.allSXData.get(self)) {
                    this.nodesVisible = false
                } else {
                    this.allSXData.set(self, sxData)
                    this.shousuocommon()
                }
                // this.allSXData.get(self)
            }
            console.log(this.allSXData)
            // this.shousuocommon()
        },
        shousuocommon () {
            this.nodesVisible = false
            for (let _sx of this.allSXData.values()) {
                _sx.line = []
                // 判断是否有收缩的
                if (_sx.LDLine.length > 0) {
                    // 删除落地关系的线
                    for (let item of _sx.LDLine) {
                        this.cy.remove(this.cy.$(`#${item}`))
                    }
                    // 根据rowkey 隐藏点
                    for (let item of Array.from(this.cy.collection('node'))) {
                        if (_sx.LDNode.includes(item._private.data.rowkey)) {
                            let currentedges = Array.from(
                                this.cy.$(`#${item._private.data.rowkey}`).neighborhood('edge')
                            )
                            // 删除落地对象
                            this.cy.remove(this.cy.$(`#${item._private.data.rowkey}`))
                            setTimeout(() => {
                                for (let list of currentedges) {
                                    let currentData = []
                                    let currentData1 = []
                                    currentData = {
                                        group: 'edges',
                                        data: {
                                            id: list._private.data.id,
                                            source: '',
                                            target: '',
                                            name: list._private.data.name,
                                            linkuri: list._private.data.linkuri,
                                            endtime: list._private.data.endtime,
                                            starttime: list._private.data.starttime,
                                            twoway: list._private.data.twoway,
                                            readOnly: list._private.data.readOnly
                                        }
                                    }
                                    currentData1 = {
                                        group: 'edges',
                                        data: {
                                            id: list._private.data.id,
                                            source: '',
                                            target: '',
                                            name: list._private.data.name,
                                            linkuri: list._private.data.linkuri,
                                            endtime: list._private.data.endtime,
                                            starttime: list._private.data.starttime,
                                            twoway: list._private.data.twoway,
                                            readOnly: list._private.data.readOnly
                                        }
                                    }
                                    if (list._private.data.target == item._private.data.rowkey) {
                                        currentData.data.source = list._private.data.source
                                        currentData.data.target = _sx.source
                                    } else if (
                                        item._private.data.rowkey == list._private.data.source
                                    ) {
                                        currentData.data.source = _sx.source
                                        currentData.data.target = list._private.data.target
                                    }
                                    if (list._private.data.target == item._private.data.rowkey) {
                                        currentData1.data.source = list._private.data.source
                                        currentData1.data.target = item._private.data.rowkey
                                    } else if (
                                        item._private.data.rowkey == list._private.data.source
                                    ) {
                                        currentData1.data.source = item._private.data.rowkey
                                        currentData1.data.target = list._private.data.target
                                    }
                                    //  保存需要删除的二级线
                                    _sx.line.push(currentData1)
                                    this.cy.add(currentData)
                                }
                            }, 100)
                            //  this.cy.remove(this.cy.$(`#${item._private.data.rowkey}`))
                            // this.cy.$(`#${item._private.data.rowkey}`).style('zIndex',-200)
                            // console.log( this.cy.$(`#${item._private.data.rowkey}`).style())
                            // vm.cy.remove(vm.cy.$(`#${item._private.data.rowkey}`))
                        }
                    }
                    console.log(this.allSXData)
                } else {
                    this.$message.info('无可收缩对象')
                    return
                }
            }
        },
        // 校验落地
        handleVerify (first, second) {
            if (first == 'keyfigures' && second == 'socialaccount') {
                return true
            } else if (first == 'socialaccount' && second == 'keyfigures') {
                return true
            } else if (first == 'socialaccount' && second == 'focusgroup') {
                return true
            } else if (first == 'focusgroup' && second == 'socialaccount') {
                return true
            } else {
                return false
            }
        },
        // 搜索接触拖拽到画布
        dragstart (event, data) {
            event.dataTransfer.setData('item', JSON.stringify(data))
        },
        // 搜索接触拖拽到画布
        dragend (event) {
            // event.dataTransfer.clearData()
        },

        // 搜索接触拖拽到画布
        allowDrop (event) {
            event.preventDefault()
        },

        // 画布结束拖拽数据
        drop (event) {
            let vm = this
            let allData = vm.cy.json()
            let data = event.dataTransfer.getData('item')
            this.dropData = JSON.parse(data)
            if (this.groupVisible) {
                if (this.chooseResultList1.length != 0) {
                    if (
                        this.chooseResultList1.find(item => {
                            return item.rowkey == this.dropData.rowkey
                        })
                    ) {
                        let relationsObjList = []
                        let otherRowkey = []
                        if (allData.elements.nodes != undefined) {
                            for (let o = 0; o < this.chooseResultList1.length; o++) {
                                let currentIndex = this.chooseResultList1[o]
                                otherRowkey.push(this.chooseResultList1[o].rowkey)
                                if (
                                    !allData.elements.nodes.find(item => {
                                        return item.data.rowkey == currentIndex.rowkey
                                    })
                                ) {
                                    let relationsObj = {
                                        id: '',
                                        group: 'nodes',
                                        data: {
                                            id: currentIndex.rowkey,
                                            displayname: currentIndex.displayName,
                                            name: currentIndex.name,
                                            showName: currentIndex.showName,
                                            image: currentIndex.iconUrl,
                                            objecttype: currentIndex.objectType,
                                            objecturi: currentIndex.objectUri,
                                            rowkey: currentIndex.rowkey,
                                            twoway: currentIndex.twoway,
                                            belongGroup: currentIndex.belongGroup
                                        }
                                    }
                                    relationsObjList.push(relationsObj)
                                }
                            }
                            vm.cy.add(relationsObjList)
                            vm.handleInitializeData()
                        } else {
                            for (let o = 0; o < this.chooseResultList1.length; o++) {
                                let currentIndex = this.chooseResultList1[o]
                                otherRowkey.push(this.chooseResultList1[o].rowkey)
                                let relationsObj = {
                                    id: '',
                                    group: 'nodes',
                                    data: {
                                        id: currentIndex.rowkey,
                                        displayname: currentIndex.displayName,
                                        name: currentIndex.name,
                                        showName: currentIndex.showName,
                                        image: currentIndex.iconUrl,
                                        objecttype: currentIndex.objectType,
                                        objecturi: currentIndex.objectUri,
                                        rowkey: currentIndex.rowkey,
                                        twoway: currentIndex.twoway,
                                        belongGroup: currentIndex.belongGroup
                                    }
                                }
                                relationsObjList.push(relationsObj)
                            }
                            vm.cy.add(relationsObjList)
                            vm.handleInitializeData()
                        }
                        // 添加this.chooseResultList到画布

                        if (allData.elements) {
                            if (allData.elements.nodes != undefined) {
                                let current2 = allData.elements.nodes
                                let cyNodeRowkey2 = []
                                for (let k = 0; k < current2.length; k++) {
                                    if (current2[k].data) {
                                        cyNodeRowkey2.push(current2[k].data.rowkey)
                                    }
                                }
                                vm.handleConfirmEdge(cyNodeRowkey2, otherRowkey)
                            } else {
                                vm.handleConfirmEdge(otherRowkey, otherRowkey)
                            }
                        }
                    } else {
                        // 添加当前实体到画布
                        let relationsObj = {
                            id: '',
                            group: 'nodes',
                            data: {
                                id: this.dropData.rowkey,
                                displayname: this.dropData.displayName,
                                name: this.dropData.name,
                                showName: this.dropData.showName,
                                image: this.dropData.iconUrl,
                                objecttype: this.dropData.objectType,
                                objecturi: this.dropData.objectUri,
                                rowkey: this.dropData.rowkey,
                                twoway: this.dropData.twoway,
                                belongGroup: this.dropData.belongGroup
                            }
                        }
                        if (allData.elements) {
                            if (allData.elements.nodes != undefined) {
                                let current = []
                                let cyNodeRowkey = []
                                if (
                                    !allData.elements.nodes.find(item => {
                                        return item.data.rowkey == this.dropData.rowkey
                                    })
                                ) {
                                    vm.cy.add(relationsObj)
                                    vm.handleInitializeData()
                                }
                                let cyData1 = vm.cy.json().elements.nodes
                                for (let k = 0; k < cyData1.length; k++) {
                                    if (cyData1[k].data) {
                                        cyNodeRowkey.push(cyData1[k].data.rowkey)
                                    }
                                }
                                vm.handleConfirmEdge(cyNodeRowkey, [this.dropData.rowkey])
                            } else {
                                vm.cy.add(relationsObj)
                                vm.handleInitializeData()
                            }
                        }
                    }
                } else {
                    // 添加当前实体到画布
                    let relationsObj = {
                        id: '',
                        group: 'nodes',
                        data: {
                            id: this.dropData.rowkey,
                            displayname: this.dropData.displayName,
                            name: this.dropData.name,
                            showName: this.dropData.showName,
                            image: this.dropData.iconUrl,
                            objecttype: this.dropData.objectType,
                            objecturi: this.dropData.objectUri,
                            rowkey: this.dropData.rowkey,
                            twoway: this.dropData.twoway,
                            belongGroup: this.dropData.belongGroup
                        }
                    }
                    if (allData.elements) {
                        if (allData.elements.nodes != undefined) {
                            let current1 = []
                            let cyNodeRowkey1 = []
                            if (
                                !allData.elements.nodes.find(item => {
                                    return item.data.rowkey == this.dropData.rowkey
                                })
                            ) {
                                vm.cy.add(relationsObj)
                                vm.handleInitializeData()
                                current1 = allData.elements.nodes
                            }

                            let cyData = vm.cy.json().elements.nodes
                            for (let u = 0; u < cyData.length; u++) {
                                if (cyData[u].data) {
                                    cyNodeRowkey1.push(cyData[u].data.rowkey)
                                }
                            }
                            vm.handleConfirmEdge(cyNodeRowkey1, [this.dropData.rowkey])
                        } else {
                            vm.cy.add(relationsObj)
                            vm.handleInitializeData()
                        }
                    }
                }
            } else if (this.resultVisible) {
                if (this.chooseResultList.length != 0) {
                    if (
                        this.chooseResultList.find(item => {
                            return item.rowkey == this.dropData.rowkey
                        })
                    ) {
                        let relationsObjList = []
                        let otherRowkey = []
                        if (allData.elements.nodes != undefined) {
                            for (let o = 0; o < this.chooseResultList.length; o++) {
                                let currentIndex = this.chooseResultList[o]
                                otherRowkey.push(this.chooseResultList[o].rowkey)
                                if (
                                    !allData.elements.nodes.find(item => {
                                        return item.data.rowkey == currentIndex.rowkey
                                    })
                                ) {
                                    let relationsObj = {
                                        id: '',
                                        group: 'nodes',
                                        data: {
                                            id: currentIndex.rowkey,
                                            displayname: currentIndex.displayName,
                                            name: currentIndex.name,
                                            showName: currentIndex.showName,
                                            image: currentIndex.iconUrl,
                                            objecttype: currentIndex.objectType,
                                            objecturi: currentIndex.objectUri,
                                            rowkey: currentIndex.rowkey,
                                            twoway: currentIndex.twoway,
                                            belongGroup: currentIndex.belongGroup
                                        }
                                    }
                                    relationsObjList.push(relationsObj)
                                }
                            }
                            vm.cy.add(relationsObjList)
                            vm.handleInitializeData()
                        } else {
                            for (let o = 0; o < this.chooseResultList.length; o++) {
                                let currentIndex = this.chooseResultList[o]
                                otherRowkey.push(this.chooseResultList[o].rowkey)
                                let relationsObj = {
                                    id: '',
                                    group: 'nodes',
                                    data: {
                                        id: currentIndex.rowkey,
                                        displayname: currentIndex.displayName,
                                        name: currentIndex.name,
                                        showName: currentIndex.showName,
                                        image: currentIndex.iconUrl,
                                        objecttype: currentIndex.objectType,
                                        objecturi: currentIndex.objectUri,
                                        rowkey: currentIndex.rowkey,
                                        twoway: currentIndex.twoway,
                                        belongGroup: currentIndex.belongGroup
                                    }
                                }
                                relationsObjList.push(relationsObj)
                            }
                            vm.cy.add(relationsObjList)
                            vm.handleInitializeData()
                        }
                        // 添加this.chooseResultList到画布

                        if (allData.elements) {
                            if (allData.elements.nodes != undefined) {
                                let current2 = allData.elements.nodes
                                let cyNodeRowkey2 = []
                                for (let k = 0; k < current2.length; k++) {
                                    if (current2[k].data) {
                                        cyNodeRowkey2.push(current2[k].data.rowkey)
                                    }
                                }
                                vm.handleConfirmEdge(cyNodeRowkey2, otherRowkey)
                            } else {
                                vm.handleConfirmEdge(otherRowkey, otherRowkey)
                            }
                        }
                    } else {
                        // 添加当前实体到画布
                        let relationsObj = {
                            id: '',
                            group: 'nodes',
                            data: {
                                id: this.dropData.rowkey,
                                displayname: this.dropData.displayName,
                                name: this.dropData.name,
                                showName: this.dropData.showName,
                                image: this.dropData.iconUrl,
                                objecttype: this.dropData.objectType,
                                objecturi: this.dropData.objectUri,
                                rowkey: this.dropData.rowkey,
                                twoway: this.dropData.twoway,
                                belongGroup: this.dropData.belongGroup
                            }
                        }
                        if (allData.elements) {
                            if (allData.elements.nodes != undefined) {
                                let current = []
                                let cyNodeRowkey = []
                                if (
                                    !allData.elements.nodes.find(item => {
                                        return item.data.rowkey == this.dropData.rowkey
                                    })
                                ) {
                                    vm.cy.add(relationsObj)
                                    vm.handleInitializeData()
                                }
                                let cyData1 = vm.cy.json().elements.nodes
                                for (let k = 0; k < cyData1.length; k++) {
                                    if (cyData1[k].data) {
                                        cyNodeRowkey.push(cyData1[k].data.rowkey)
                                    }
                                }
                                vm.handleConfirmEdge(cyNodeRowkey, [this.dropData.rowkey])
                            } else {
                                vm.cy.add(relationsObj)
                                vm.handleInitializeData()
                            }
                        }
                    }
                } else {
                    // 添加当前实体到画布
                    let relationsObj = {
                        id: '',
                        group: 'nodes',
                        data: {
                            id: this.dropData.rowkey,
                            displayname: this.dropData.displayName,
                            name: this.dropData.name,
                            showName: this.dropData.showName,
                            image: this.dropData.iconUrl,
                            objecttype: this.dropData.objectType,
                            objecturi: this.dropData.objectUri,
                            rowkey: this.dropData.rowkey,
                            twoway: this.dropData.twoway,
                            belongGroup: this.dropData.belongGroup
                        }
                    }
                    if (allData.elements) {
                        if (allData.elements.nodes != undefined) {
                            let current1 = []
                            let cyNodeRowkey1 = []
                            if (
                                !allData.elements.nodes.find(item => {
                                    return item.data.rowkey == this.dropData.rowkey
                                })
                            ) {
                                vm.cy.add(relationsObj)
                                vm.handleInitializeData()
                                current1 = allData.elements.nodes
                            }

                            let cyData = vm.cy.json().elements.nodes
                            for (let u = 0; u < cyData.length; u++) {
                                if (cyData[u].data) {
                                    cyNodeRowkey1.push(cyData[u].data.rowkey)
                                }
                            }
                            vm.handleConfirmEdge(cyNodeRowkey1, [this.dropData.rowkey])
                        } else {
                            vm.cy.add(relationsObj)
                            vm.handleInitializeData()
                        }
                    }
                }
            }

            console.log('data: ', this.dropData)
        },

        // 画布结束拖拽数据
        drop1 (event) {
            let vm = this
            let allData = vm.cy.json()
            let data = event.dataTransfer.getData('item')
            this.dropData = JSON.parse(data)
            if (this.chooseResultList.length != 0) {
                if (
                    this.chooseResultList.find(item => {
                        return item.rowkey == this.dropData.rowkey
                    })
                ) {
                    let relationsObjList = []
                    let otherRowkey = []
                    if (allData.elements.nodes != undefined) {
                        for (let o = 0; o < this.chooseResultList.length; o++) {
                            let currentIndex = this.chooseResultList[o]
                            otherRowkey.push(this.chooseResultList[o].rowkey)
                            if (
                                !allData.elements.nodes.find(item => {
                                    return item.data.rowkey == currentIndex.rowkey
                                })
                            ) {
                                let relationsObj = {
                                    id: '',
                                    group: 'nodes',
                                    data: {
                                        id: currentIndex.rowkey,
                                        displayname: currentIndex.displayName,
                                        name: currentIndex.name,
                                        showName: currentIndex.showName,
                                        image: currentIndex.iconUrl,
                                        objecttype: currentIndex.objectType,
                                        objecturi: currentIndex.objectUri,
                                        rowkey: currentIndex.rowkey,
                                        twoway: currentIndex.twoway,
                                        belongGroup: currentIndex.belongGroup
                                    }
                                }
                                relationsObjList.push(relationsObj)
                            }
                        }
                        vm.cy.add(relationsObjList)
                        vm.handleInitializeData()
                    } else {
                        for (let o = 0; o < this.chooseResultList.length; o++) {
                            let currentIndex = this.chooseResultList[o]
                            otherRowkey.push(this.chooseResultList[o].rowkey)
                            let relationsObj = {
                                id: '',
                                group: 'nodes',
                                data: {
                                    id: currentIndex.rowkey,
                                    displayname: currentIndex.displayName,
                                    name: currentIndex.name,
                                    showName: currentIndex.showName,
                                    image: currentIndex.iconUrl,
                                    objecttype: currentIndex.objectType,
                                    objecturi: currentIndex.objectUri,
                                    rowkey: currentIndex.rowkey,
                                    twoway: currentIndex.twoway,
                                    belongGroup: currentIndex.belongGroup
                                }
                            }
                            relationsObjList.push(relationsObj)
                        }
                        vm.cy.add(relationsObjList)
                        vm.handleInitializeData()
                    }
                    // 添加this.chooseResultList到画布

                    if (allData.elements) {
                        if (allData.elements.nodes != undefined) {
                            let current2 = allData.elements.nodes
                            let cyNodeRowkey2 = []
                            for (let k = 0; k < current2.length; k++) {
                                if (current2[k].data) {
                                    cyNodeRowkey2.push(current2[k].data.rowkey)
                                }
                            }
                            vm.handleConfirmEdge(cyNodeRowkey2, otherRowkey)
                        } else {
                            vm.handleConfirmEdge(otherRowkey, otherRowkey)
                        }
                    }
                } else {
                    // 添加当前实体到画布
                    let relationsObj = {
                        id: '',
                        group: 'nodes',
                        data: {
                            id: this.dropData.rowkey,
                            displayname: this.dropData.displayName,
                            name: this.dropData.name,
                            showName: this.dropData.showName,
                            image: this.dropData.iconUrl,
                            objecttype: this.dropData.objectType,
                            objecturi: this.dropData.objectUri,
                            rowkey: this.dropData.rowkey,
                            twoway: this.dropData.twoway,
                            belongGroup: this.dropData.belongGroup
                        }
                    }
                    if (allData.elements) {
                        if (allData.elements.nodes != undefined) {
                            let current = []
                            let cyNodeRowkey = []
                            if (
                                !allData.elements.nodes.find(item => {
                                    return item.data.rowkey == this.dropData.rowkey
                                })
                            ) {
                                vm.cy.add(relationsObj)
                                vm.handleInitializeData()
                            }
                            let cyData1 = vm.cy.json().elements.nodes
                            for (let k = 0; k < cyData1.length; k++) {
                                if (cyData1[k].data) {
                                    cyNodeRowkey.push(cyData1[k].data.rowkey)
                                }
                            }
                            vm.handleConfirmEdge(cyNodeRowkey, [this.dropData.rowkey])
                        } else {
                            vm.cy.add(relationsObj)
                            vm.handleInitializeData()
                        }
                    }
                }
            } else {
                // 添加当前实体到画布
                let relationsObj = {
                    id: '',
                    group: 'nodes',
                    data: {
                        id: this.dropData.rowkey,
                        displayname: this.dropData.displayName,
                        name: this.dropData.name,
                        showName: this.dropData.showName,
                        image: this.dropData.iconUrl,
                        objecttype: this.dropData.objectType,
                        objecturi: this.dropData.objectUri,
                        rowkey: this.dropData.rowkey,
                        twoway: this.dropData.twoway,
                        belongGroup: this.dropData.belongGroup
                    }
                }
                if (allData.elements) {
                    if (allData.elements.nodes != undefined) {
                        let current1 = []
                        let cyNodeRowkey1 = []
                        if (
                            !allData.elements.nodes.find(item => {
                                return item.data.rowkey == this.dropData.rowkey
                            })
                        ) {
                            vm.cy.add(relationsObj)
                            vm.handleInitializeData()
                            current1 = allData.elements.nodes
                        }

                        let cyData = vm.cy.json().elements.nodes
                        for (let u = 0; u < cyData.length; u++) {
                            if (cyData[u].data) {
                                cyNodeRowkey1.push(cyData[u].data.rowkey)
                            }
                        }
                        vm.handleConfirmEdge(cyNodeRowkey1, [this.dropData.rowkey])
                    } else {
                        vm.cy.add(relationsObj)
                        vm.handleInitializeData()
                    }
                }
            }
            console.log('data: ', this.dropData)
        },

        // 分组查询
        handleGroupList () {
            let params = {
                groupId: sessionStorage.getItem('groupId'),
                keyword: '',
                curpage: this.page,
                pagesize: this.page_size
            }
            getInstance(params)
                .then(res => {
                    if (res.status == 200) {
                        if (res.data.length <= 0) {
                            this.page = this.page - 1
                        }
                        res.data.forEach(v => {
                            if (v.personIconUrl) {
                                v.iconUrl = v.personIconUrl
                            }
                        })
                        this.groupList = [...this.groupList, ...res.data]
                        for (let i = 0; i < this.groupList.length; i++) {
                            this.groupList[i].active = false
                        }
                        // this.groupVisible = true;
                        // this.showCase= true
                        // this.showCaseOpacity = true
                    } else {
                        this.$message.error(res.msg)
                    }
                })
                .catch(error => {
                    this.$message.error(error)
                })
            // groupList
        },

        // 查询后点击效果
        handleChooseSearch (e, _index) {
            for (let i = 0; i < this.entryList.length; i++) {
                this.entryList[i].active = false
            }
            if (this.firstIndex) {
                this.secondIndex = _index
            } else {
                this.firstIndex = _index
                this.entryList[_index].active = true
            }
            this.chooseResultList = []
            if (
                (this.firstIndex && this.secondIndex) ||
        (this.firstIndex == 0 && this.secondIndex) ||
        (this.firstIndex == 0 && this.secondIndex == 0) ||
        (this.firstIndex && this.secondIndex == 0)
            ) {
                if (this.firstIndex > this.secondIndex) {
                    // chooseResultList
                    for (let n = 0; n < this.entryList.length; n++) {
                        if (n >= this.secondIndex && n <= this.firstIndex) {
                            this.chooseResultList.push(this.entryList[n])
                            this.entryList[n].active = true
                        }
                    }
                } else if (this.firstIndex < this.secondIndex) {
                    for (let m = 0; m < this.entryList.length; m++) {
                        if (m >= this.firstIndex && m <= this.secondIndex) {
                            this.chooseResultList.push(this.entryList[m])
                            this.entryList[m].active = true
                        }
                    }
                } else if (this.firstIndex == this.secondIndex) {
                    for (let l = 0; l < this.entryList.length; l++) {
                        if (l == this.firstIndex) {
                            this.chooseResultList.push(this.entryList[l])
                            this.entryList[l].active = true
                        }
                    }
                }
            }
            this.entryList = Object.assign([], this.entryList)
        },
        handleChooseSearchCtrl (e, _index) {
            if (this.chooseResultList.length != 0) {
                for (let i = 0; i < this.chooseResultList.length; i++) {
                    let item = this.chooseResultList[i]
                    if (item.rowkey == this.entryList[_index].rowkey) {
                        this.entryList[_index].active = !this.entryList[_index].active
                        this.chooseResultList.splice(i, 1)
                        this.entryList = Object.assign([], this.entryList)
                        return
                    }
                }
            }
            this.entryList[_index].active = true
            this.chooseResultList.push(this.entryList[_index])
            this.entryList = Object.assign([], this.entryList)
        },
        handleChooseSearchClick (e, _index, _obj) {
            let vm = this
            this.nodesParmas.rowkey = _obj.rowkey
            this.nodesParmas.objecturi = _obj.objectUri
            this.showDetails = true
            this.nodesParmas.showName = _obj.showName
                ? _obj.showName
                : _obj.displayName
            this.nodesParmas.name = _obj.name
            this.nodesParmas.image = _obj.iconUrl
            this.nodesParmas.belongGroup = _obj.belongGroup
            vm.getNodeDetails(_obj.rowkey, _obj.objectUri)
            vm.handleDynamicCondition('socialdynamic')
            vm.handleFocusgroup('focusgroup')
            vm.handleKeyfigures('keyfigures')
            vm.handleAccountNumber('socialaccount')
            // 获取文档
            vm.handleDocument('document')
            // 获取多媒体
            vm.handleMedia('media')
            if (!e.shiftKey && !e.ctrlKey) {
                this.chooseResultList = []
                for (let i = 0; i < this.entryList.length; i++) {
                    this.entryList[i].active = false
                }
                this.entryList[_index].active = !this.entryList[_index].active
                this.chooseResultList.push(this.entryList[_index])
                ;(this.firstIndex = _index),
                (this.entryList = Object.assign([], this.entryList))
            }
        },

        // 监听滚动事件
        handleScroll () {
            this.$nextTick(() => {
                const result = document.getElementById('result')
                const offsetHeight = result.offsetHeight
                const scrollTop = result.scrollTop
                const scrollHeight = result.scrollHeight
                if (offsetHeight + scrollTop - scrollHeight >= -1) {
                    // 需要执行的代码
                    this.searchParams.curpage = this.searchParams.curpage + 1
                    this.handleInquireSearch()
                }
            })
        },

        // 查询后点击效果
        handleChooseSearch1 (e, _index) {
            for (let i = 0; i < this.groupList.length; i++) {
                this.groupList[i].active = false
            }
            if (this.firstIndex1) {
                this.secondIndex1 = _index
            } else {
                this.firstIndex1 = _index
                this.groupList[_index].active = true
            }
            this.chooseResultList1 = []
            if (
                (this.firstIndex1 && this.secondIndex1) ||
        (this.firstIndex1 == 0 && this.secondIndex1) ||
        (this.firstIndex1 == 0 && this.secondIndex1 == 0) ||
        (this.firstIndex1 && this.secondIndex1 == 0)
            ) {
                if (this.firstIndex1 > this.secondIndex1) {
                    // chooseResultList
                    for (let n = 0; n < this.groupList.length; n++) {
                        if (n >= this.secondIndex1 && n <= this.firstIndex1) {
                            this.chooseResultList1.push(this.groupList[n])
                            this.groupList[n].active = true
                        }
                    }
                } else if (this.firstIndex1 < this.secondIndex1) {
                    for (let m = 0; m < this.groupList.length; m++) {
                        if (m >= this.firstIndex1 && m <= this.secondIndex1) {
                            this.chooseResultList1.push(this.groupList[m])
                            this.groupList[m].active = true
                        }
                    }
                } else if (this.firstIndex1 == this.secondIndex1) {
                    for (let l = 0; l < this.groupList.length; l++) {
                        if (l == this.firstIndex1) {
                            this.chooseResultList1.push(this.groupList[l])
                            this.entryList1[l].active = true
                        }
                    }
                }
            }
            this.groupList = Object.assign([], this.groupList)
        },
        handleChooseSearchCtrl1 (e, _index) {
            if (this.chooseResultList1.length != 0) {
                for (let i = 0; i < this.chooseResultList1.length; i++) {
                    let item = this.chooseResultList1[i]
                    if (item.rowkey == this.groupList[_index].rowkey) {
                        this.groupList[_index].active = !this.groupList[_index].active
                        this.chooseResultList1.splice(i, 1)
                        this.groupList = Object.assign([], this.groupList)
                        return
                    }
                }
            }
            this.groupList[_index].active = true
            this.chooseResultList1.push(this.groupList[_index])
            this.groupList = Object.assign([], this.groupList)
        },
        handleChooseSearchClick1 (e, _index, _obj) {
            let vm = this
            this.nodesParmas.rowkey = _obj.rowkey
            this.nodesParmas.objecturi = _obj.objectUri
            this.showDetails = true
            this.nodesParmas.showName = _obj.showName
                ? _obj.showName
                : _obj.displayName
            this.nodesParmas.name = _obj.name
            this.nodesParmas.image = _obj.iconUrl
            this.nodesParmas.belongGroup = _obj.belongGroup
            vm.getNodeDetails(_obj.rowkey, _obj.objectUri)
            vm.handleDynamicCondition('socialdynamic')
            vm.handleFocusgroup('focusgroup')
            vm.handleKeyfigures('keyfigures')
            vm.handleAccountNumber('socialaccount')
            // 获取文档
            vm.handleDocument('document')
            // 获取多媒体
            vm.handleMedia('media')
            if (!e.shiftKey && !e.ctrlKey) {
                this.chooseResultList1 = []
                for (let i = 0; i < this.groupList.length; i++) {
                    this.groupList[i].active = false
                }
                this.groupList[_index].active = !this.groupList[_index].active
                this.chooseResultList1.push(this.groupList[_index])
                ;(this.firstIndex1 = _index),
                (this.groupList = Object.assign([], this.groupList))
            }
        },

        // 监听滚动事件
        handleScroll1 () {
            this.$nextTick(() => {
                const result = document.getElementById('groupResult')
                const offsetHeight = result.offsetHeight
                const scrollTop = result.scrollTop
                const scrollHeight = result.scrollHeight
                if (offsetHeight + scrollTop - scrollHeight >= -1) {
                    // 需要执行的代码
                    this.page = this.page + 1
                    this.handleGroupList()
                }
            })
        },
        // 全文检索
        handleInquireSearch () {
            listFullText(this.searchParams).then(res => {
                if (res.status == 200) {
                    let entryList = res.data
                    entryList.forEach(item => {
                        if (item.personIconUrl) {
                            item.iconUrl = item.personIconUrl
                        }
                    })
                    // this.entryList = [];
                    this.entryList = this.entryList.concat(entryList)
                    this.firstIndex = ''
                    this.secondIndex = ''
                    if (this.entryList.length != 0) {
                        this.resultVisible = true
                    } else {
                        this.resultVisible = false
                    }
                    for (let i = 0; i < this.entryList.length; i++) {
                        this.entryList[i].active = false
                    }
                }
            })
        },

        handleGroupCountFullText () {
            let obj = {
                uriList: '',
                typeList: [
                    'socialaccount',
                    'socialdynamic',
                    'keyfigures',
                    'focusgroup'
                ].join(',')
            }
            this.objectListCount = []
            gettree(obj).then(res => {
                let treeData = res.data
                for (let i = 0; i < treeData.length; i++) {
                    if (this.searchParams.objectType == treeData[i].parentkey) {
                        this.objectListCount.push(treeData[i])
                    }
                }
            })
        },
        // 搜索
        handleSearch () {
            if (!this.keywords) {
                this.keywordVisible = false
                return
            } else {
                this.keywordVisible = true
            }
            let hasKeyword = ''
            hasKeyword = this.searchParams.keywords.find(item => {
                return item == this.keywords
            })
            if (!hasKeyword) {
                this.searchParams.keywords.push(this.keywords)
            }
            this.searchParams.objectList = []
            this.entryList = []
            this.searchParams.curpage = 1
            this.firstIndex = ''
            this.secondIndex = ''
            this.handleInquireSearch()
            this.handleGroupCountFullText()
        },

        // 删除搜索keyword
        handleDeleteSearch (_index) {
            this.searchParams.keywords.splice(_index, 1)
            if (this.searchParams.keywords.length == 0) {
                this.keywords = '*'
                this.searchParams.keywords.push(this.keywords)
            }
            this.entryList = []
            this.searchParams.curpage = 1
            this.firstIndex = ''
            this.secondIndex = ''
            this.handleInquireSearch()
            this.handleGroupCountFullText()
        },

        // 对象类型选择
        handleObjectType () {
            this.objectTypeCount = ''
            this.searchParams.objectList = []
            this.entryList = []
            this.handleInquireSearch()
            this.handleGroupCountFullText()
        },
        handleObjectTypeCount () {
            this.entryList = []
            this.searchParams.curpage = 1
            this.firstIndex = ''
            this.secondIndex = ''
            this.searchParams.objectList = []
            this.searchParams.objectList = [this.objectTypeCount]
            this.handleInquireSearch()
        },
        handleObjectTypeDynamic () {
            let hasObj = ''
            hasObj = this.objectListDynamicChoose.find(item => {
                return item.uri == this.objectTypeDynamic.uri
            })
            if (!hasObj) {
                this.objectListDynamicChoose.push(this.objectTypeDynamic)
            }
            this.searchParams.objectList = []
            if (this.objectListDynamicChoose.length != 0) {
                for (let i = 0; i < this.objectListDynamicChoose.length; i++) {
                    this.searchParams.objectList.push(this.objectListDynamicChoose[i].uri)
                }
            }
            this.objectTypeDynamic = {}
            this.searchParams.objectType = 'socialdynamic'
            this.entryList = []
            this.searchParams.curpage = 1
            this.firstIndex = ''
            this.secondIndex = ''
            this.handleInquireSearch()
        },
        hanldeDeleteObjectTypeCount (_index) {
            for (let i = 0; i < this.searchParams.objectList.length; i++) {
                if (
                    this.searchParams.objectList[i] ==
          this.objectListCountChoose[_index].uri
                ) {
                    this.searchParams.objectList.splice(i, 1)
                }
            }
            this.objectListCountChoose.splice(_index, 1)
            this.searchParams.objectList = []
            if (this.objectListCountChoose.length != 0) {
                for (let i = 0; i < this.objectListCountChoose.length; i++) {
                    this.searchParams.objectList.push(this.objectListCountChoose[i].uri)
                }
            }
            this.searchParams.objectType = 'socialaccount'
            this.entryList = []
            this.searchParams.curpage = 1
            this.firstIndex = ''
            this.secondIndex = ''
            this.handleInquireSearch()
        },
        hanldeDeleteObjectListDynamic (_index) {
            for (let i = 0; i < this.searchParams.objectList.length; i++) {
                if (
                    this.searchParams.objectList[i] ==
          this.objectListDynamicChoose[_index].uri
                ) {
                    this.searchParams.objectList.splice(i, 1)
                }
            }
            this.objectListDynamicChoose.splice(_index, 1)
            this.searchParams.objectList = []
            if (this.objectListDynamicChoose.length != 0) {
                for (let i = 0; i < this.objectListDynamicChoose.length; i++) {
                    this.searchParams.objectList.push(this.objectListDynamicChoose[i].uri)
                }
            }
            this.objectTypeDynamic = {}
            this.searchParams.objectType = 'socialdynamic'
            this.entryList = []
            this.searchParams.curpage = 1
            this.firstIndex = ''
            this.secondIndex = ''
            this.handleInquireSearch()
        },

        // 删除边
        deleteEdge () {
            let vm = this
            if (!this.deleteLint) {
                vm.$message.error('请先选择边')
                return
            }
            if (vm.readOnlyParmas.readOnly) {
                vm.$message.error('该边不能删除')
                vm.readOnlyParmas = {}
                vm.nodesVisible = false
                return
            }
            let linkId = this.deleteLint
            if (linkId == '') {
                vm.$message({
                    message: '请选择要删除的连线！',
                    type: 'error'
                })
                return
            }
            removeEdge(linkId).then(res => {
                vm.$message({
                    message: '删除成功！',
                    type: 'success'
                })
                vm.cy.remove(vm.cy.$(`#${vm.deleteLint}`))
                vm.nodesVisible = false
                vm.handleCreateLint()
                // 执行画布保存
                vm.handlenewSnapshot()
            })
        },

        // 时间轴显示
        handleTimeLint () {
            this.showTimeLint = true
            this.timeLimeVisible = true
            this.historyVisible = false
            this.$nextTick(() => {
                this.handleCreateLint()
            })
        },

        handleHistorySanp () {
            this.showTimeLint = true
            this.timeLimeVisible = false
            this.historyVisible = true
        },

        // 时间轴柱状图
        initChart () {
            console.log(this.dataTime)
            console.log(this.dataData)
            if (document.getElementById('container')) {
                this.chart = echarts.init(document.getElementById('container'))
                console.log(this.chart)
                var option = null
                option = {
                    brush: {
                        toolbox: ['lineX'],
                        xAxisIndex: 'all',
                        throttleType: 'debounce',
                        throttleDelay: 200,
                        outOfBrush: {
                            colorAlpha: 1
                        },
                        inBrush: {
                            colorAlpha: 0.3
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: this.dataTime, // 时间
                        splitLine: { show: false }, // 去除网格线
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: '#fff', // 左边线的颜色
                                width: '2' // 坐标线的宽度
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 40,
                            formatter: function (value) {
                                return value.split(' ').join('\n')
                            },
                            textStyle: {
                                color: '#fff' // 坐标值得具体的颜色
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1,
                        splitLine: { show: false }, // 去除网格线
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: '#fff', // 左边线的颜色
                                width: '2' // 坐标线的宽度
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#fff' // 坐标值得具体的颜色
                            }
                        }
                    },
                    series: [
                        {
                            data: this.dataData, // 数据
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#4ad2ff'
                                }
                            },
                            barWidth: 30
                        }
                    ]
                }
                this.chart.setOption(option, true)
                this.chart.dispatchAction({
                    type: 'takeGlobalCursor',
                    key: 'brush',
                    brushOption: {
                        brushType: 'lineX'
                    }
                })
                window.addEventListener('resize', () => {
                    if (this.chart) {
                        this.chart.resize()
                    }
                })
            }
        },

        // 保存画布
        handleSaveLayout () {
            let layoutData = this.cy.json()
            let saveObj = {
                id: this.layoutId,
                caseId: '1',
                graphData: JSON.stringify(layoutData)
            }
            saveOrUpdate(saveObj)
                .then(res => {
                    if (res.status != 200) {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                })
                .catch(error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    })
                })
        },

        // 初始化节点样式和边的样式
        handleInitializeData () {
            this.cy.nodes(function (n) {
                var node = n.data()
                n.style({
                    'background-image': node['image'],
                    content: node['showName']
                        ? node['showName']
                        : node['displayname']
                            ? node['displayname']
                            : node['name'],
                    'font-size': 12,
                    'font-family': 'microsoft yahei'
                })
                n.unselect()
            })
            this.cy.edges(function (n) {
                var edges = n.data()
                n.style({
                    'target-arrow-shape': 'triangle',
                    'curve-style': 'bezier',
                    'target-arrow-color': '#888',
                    'source-arrow-color': '#888',
                    'source-arrow-shape':
            edges['twoway'] == 'twoway' ? 'triangle' : 'none',
                    content: edges['name'] ? edges['name'] : edges['displayname'],
                    'font-size': 12,
                    'font-family': 'microsoft yahei'
                })
                n.unselect()
            })

            // this.handleLayoutRun()
        },

        // 解析节点之间的关系
        handleConfirmEdge (_rowkey, _otherRowkeys) {
            let vm = this
            let rowkeyList = []
            for (let i = 0; i < _rowkey.length; i++) {
                if (_rowkey[i] != undefined) {
                    rowkeyList.push(_rowkey[i])
                }
            }
            let nodesRelationship = {
                rowkeys: rowkeyList,
                otherRowkeys: _otherRowkeys
            }
            let postData = {
                edges: []
            }
            confirmEdge(nodesRelationship).then(res => {
                if (res.status == 200) {
                    let edges = res.data
                    for (let e = 0; e < edges.length; e++) {
                        let nodesCurrent = edges[e]
                        if (nodesCurrent.length == 2) {
                            let createEdges = {
                                group: 'edges',
                                data: {
                                    id: nodesCurrent[0].linkId,
                                    source: '',
                                    target: '',
                                    name: nodesCurrent[0].linkName,
                                    rowkey: nodesCurrent[1].rowkey,
                                    linkuri: nodesCurrent[0].linkUri,
                                    endtime: nodesCurrent[0].timeEnd,
                                    starttime: nodesCurrent[0].startTime,
                                    twoway: nodesCurrent[0].path,
                                    readOnly: nodesCurrent[0].readOnly
                                }
                            }
                            if (nodesCurrent[0].path == 'from') {
                                createEdges.data.source = nodesCurrent[1].rowkey
                                createEdges.data.target = nodesCurrent[0].rowkey
                                postData.edges.push(createEdges)
                                vm.cy.add(postData)
                                vm.handleInitializeData()
                                vm.handleCreateLint()
                            } else if (
                                nodesCurrent[0].path == 'to' ||
                nodesCurrent[0].path == 'twoway'
                            ) {
                                createEdges.data.source = nodesCurrent[0].rowkey
                                createEdges.data.target = nodesCurrent[1].rowkey
                                postData.edges.push(createEdges)
                                vm.cy.add(postData)
                                vm.handleInitializeData()
                                vm.handleCreateLint()
                            }
                        }
                    }
                }
            })
        },

        // 获取cookies中的关系图节点
        handleGetCookiesNodes () {
            let vm = this
            let otherRowkey = []
            let hasCookieRelation = util.getObjectsInRelationGraph()
            if (hasCookieRelation) {
                let cookiesData = {
                    nodes: []
                }
                for (let t = 0; t < hasCookieRelation.length; t++) {
                    let current = hasCookieRelation[t]
                    this.cookiesList.push(current.rowkey)
                    otherRowkey.push(current.rowkey)
                    cookiesData.nodes.push({
                        id: '',
                        group: 'nodes',
                        data: {
                            id: current.rowkey,
                            displayname: current.displayName,
                            showName: current.showName,
                            name: current.name,
                            image: current.image,
                            objecttype: current.objecttype,
                            objecturi: current.objecturi,
                            rowkey: current.rowkey,
                            belongGroup: current.belongGroup
                        },
                        position: {
                            x: Math.round(Math.random()) * 1000,
                            y: Math.round(Math.random()) * 800
                        }
                    })
                }
                vm.cy.add(cookiesData.nodes)
                vm.handleInitializeData()
                //
                let cyData = vm.cy.json()
                let cyNodeRowkey4 = []
                if (cyData.elements.nodes) {
                    for (let g = 0; g < cyData.elements.nodes.length; g++) {
                        if (cyData.elements.nodes[g].data.rowkey) {
                            cyNodeRowkey4.push(cyData.elements.nodes[g].data.rowkey)
                        }
                    }
                    vm.handleConfirmEdge(cyNodeRowkey4, otherRowkey)
                }
            }
            Cookies.set('RelationGraphData', '')
        },

        // 获取分组id的信息
        handleGroupIdList () {
            let vm = this
            vm.groupIdList = []
            if (sessionStorage.getItem('groupId')) {
                groupIdList(sessionStorage.getItem('groupId')).then(res => {
                    if (res.status == 200) {
                        let GroupIdList = res.data
                        let GroupIdData = {
                            nodes: []
                        }
                        for (let t = 0; t < GroupIdList.length; t++) {
                            let current = GroupIdList[t]
                            this.groupIdList.push(current.rowkey)
                            GroupIdData.nodes.push({
                                id: '',
                                group: 'nodes',
                                data: {
                                    id: current.rowkey,
                                    displayname: current.displayName,
                                    showName: current.showName,
                                    name: current.name,
                                    image: current.iconUrl,
                                    objecttype: current.objectType,
                                    objecturi: current.objectUri,
                                    rowkey: current.rowkey,
                                    twoway: current.twoway,
                                    belongGroup: current.belongGroup
                                },
                                position: {
                                    x: Math.round(Math.random()) * 1000,
                                    y: Math.round(Math.random()) * 800
                                }
                            })
                        }
                        vm.cy.add(GroupIdData.nodes)
                        vm.handleInitializeData()
                        // vm.handleCreateHasRelations()
                        vm.handleLayoutRun('breadthfirst')
                    }
                })
            }
        },

        // 添加有关系的边
        handleCreateHasRelations () {
            let vm = this
            let cyNodes = vm.cy.json()
            let cyNodeList = []
            let otherRowkeyList = []
            otherRowkeyList = this.groupIdList.concat(this.cookiesList)
            if (cyNodes.elements.nodes) {
                for (let i = 0; i < cyNodes.elements.nodes.length; i++) {
                    let currentNodes = cyNodes.elements.nodes[i]
                    if (currentNodes.data.rowkey) {
                        cyNodeList.push(currentNodes.data.rowkey)
                    }
                }
                vm.handleConfirmEdge(cyNodeList, otherRowkeyList)
            }
        },

        // 获取初始化数据
        handleGetGraph () {
            let vm = this
            vm.handleInitializeData()
            if (this.getSnapshotList.length != 0) {
                vm.handleGetSnapDataById(
                    this.getSnapshotList[0].id,
                    0,
                    this.getSnapshotList[0].description
                )
                vm.historyName = this.getSnapshotList[0].description
                this.canvasId = this.getSnapshotList[0].id
            } else {
                // vm.handleGroupIdList();
            }
            vm.handleLayoutRun('breadthfirst')
        },

        // 右击画布菜单
        showMenu (event) {
            var event = event || window.event
            event.preventDefault()
            var scrollX =
        document.documentElement.scrollLeft || document.body.scrollLeft
            var scrollY =
        document.documentElement.scrollTop || document.body.scrollTop
            var x = event.pageX || event.clientX + scrollX
            var y = event.pageY - 50 || event.clientY + scrollY - 50
            this.cyCanves.top = y + 5
            this.cyCanves.left = x + 5
            this.findOperateListModel = []
            this.findOperateListModelAll = []
            this.findOperateList = []
            this.example = ''
            this.form.exampleName = ''
            if (this.nodesVisible) {
                this.cyVisible = false
            } else {
                this.cyVisible = true
            }
        },

        // 显示搜索菜单
        handleShowSearch () {
            this.visible = !this.visible
            this.showRelations = false
            this.showCase = false
            this.showOpacity = true
            this.showCaseOpacity = false
            this.showRelationOpacity = false
            this.showCase = false
            this.showRelations = false
            this.showRelationOpacity = false
            this.groupVisible = false
            this.resultVisible = this.visible
            if (this.entryList.length == 0) {
                this.resultVisible = false
            }
            if (this.chart) {
                setTimeout(() => {
                    this.chart.resize()
                }, 150)
            }
        },

        // 显示案例
        handleShowCase () {
            this.showCase = !this.showCase
            this.groupVisible = !this.groupVisible
            this.visible = false
            this.showRelations = false
            this.showOpacity = false
            this.showCaseOpacity = true
            this.showRelationOpacity = false
            this.resultVisible = false
            if (this.chart) {
                setTimeout(() => {
                    this.chart.resize()
                }, 150)
            }
        },

        // 显示分析分组
        handleShowRelations () {
            this.visible = false
            this.showCase = false
            this.showRelations = !this.showRelations
            this.showOpacity = false
            this.showCaseOpacity = false
            this.showRelationOpacity = true
            if (this.chart) {
                setTimeout(() => {
                    this.chart.resize()
                }, 150)
            }
        },

        // 获取分组
        async loadTree (type, treeId) {
            let result = await getsubscribeTree({ top: 'false' })
            this.loadTreeList = result.data
            if (sessionStorage.getItem('groupId')) {
                for (let i = 0; i < this.loadTreeList.length; i++) {
                    let item = this.loadTreeList[i]
                    if (item.id == sessionStorage.getItem('groupId')) {
                        this.handleChooseGroupId(
                            i,
                            this.loadTreeList[i].id,
                            this.loadTreeList[i].displayname
                        )
                        this.activeNum = i
                    }
                }
            } else {
                this.handleChooseGroupId(
                    0,
                    this.loadTreeList[0].id,
                    this.loadTreeList[0].displayname
                )
            }
        },

        // 左侧菜单样式
        handleChooseGroupId (_index, _id, _name) {
            let vm = this
            this.activeNum = _index
            vm.cy.collection('node').remove()
            sessionStorage.setItem('groupId', _id)
            sessionStorage.setItem('groupDisplayName', _name)
            this.groupDisplayName = sessionStorage.getItem('groupDisplayName')
            this.handleGetSnapshot()
            this.groupList = []
            this.page = 1
            this.handleGroupList()
        },

        // 布局变幻
        handleLayoutRun (_name) {
            let _this = this
            let options = {
                name: _name || 'breadthfirst',
                fit: true, // whether to fit the viewport to the graph
                animate: true, // 出来动画
                zoom: 0.2
            }
            let layout = _this.cy.layout(options)
            layout.run()
        },

        // 画布布局
        handeleChooseLayout (_layout) {
            let vm = this
            vm.cyVisible = false
            if (_layout == 'initialize') {
                vm.cy.reset()
                vm.cy.zoom(0.5)
            } else if (_layout == 'breadthfirst') {
                vm.handleLayoutRun('breadthfirst')
            } else if (_layout == 'grid') {
                vm.handleLayoutRun('grid')
            } else if (_layout == 'circle') {
                vm.handleLayoutRun('circle')
            } else if (_layout == 'random') {
                vm.handleLayoutRun('random')
            }
        },

        // 画布缩放
        handleChangeSize (_size) {
            let vm = this
            this.cyVisible = false
            this.cy.zoom({
                level: parseInt(_size), // the zoom level
                renderedPosition: { x: vm.cyCanves.left, y: vm.cyCanves.top }
            })
        },

        // 新增实体
        handleCreatEntity () {
            this.addNodesVisible = true
            this.nodesVisible = false
            this.cyVisible = false
            this.handleGetTree()
        },

        // 获取添加树状图
        handleGetTree () {
            let obj = {
                uriList: '',
                typeList: [
                    'socialaccount',
                    'socialdynamic',
                    'keyfigures',
                    'focusgroup'
                ].join(',')
            }
            gettree(obj).then(res => {
                this.addNode = this.handleLevelOne(res.data)
            })
        },
        // 根据type添加树
        handleGetTreeType (type) {
            let obj = {
                uriList: '',
                typeList: [
                    'socialaccount',
                    'socialdynamic',
                    'keyfigures',
                    'focusgroup'
                ].join(',')
            }
            gettree(obj).then(res => {
                // this.handleLevelOne(res.data)
                for (let item of this.handleLevelOne(res.data)) {
                    console.log(item)
                    if (item.ownkey == type) {
                        this.currentGxdata = item.children
                        return true
                    }
                }
            })
        },
        // 控制树下拉框的显示与隐藏
        hideTree () {
            if (this.showTree) {
                this.showTree = false
            }
        },

        showTreeFn () {
            this.showTree = !this.showTree
        },

        handleGetTreeDate (data) {
            if (data.parenturi) {
                this.example = data.value
                this.form.exampleName = data.displayname
                this.showTree = false
                this.getproperty(this.example)
            }
        },
        // 获取线的属性
        getLineproperty (_uri) {
            if (!_uri) {
                return
            }
            this.showselectLineProtype = true
            this.addAttributeLine = {}
            // todosome
            findLinkPropertiesByUri({ uri: _uri }).then(res => {
                let arrList = []
                this.LinefindOperateList = res.data
                this.LinefindOperateListModel = []
                this.LinefindOperateListModelAll = []
                for (let i = 0; i < this.LinefindOperateList.length; i++) {
                    let current = this.LinefindOperateList[i]
                    if (current.representative == '1') {
                        if (current.propertyType == 'GisData') {
                            let obj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'GisData',
                                displayed: current.displayed != '0',
                                address: '',
                                latitude: '',
                                longitude: '',
                                displayname: current.displayname,
                                representative: current.representative,
                                label: current.representative == 1
                            }
                            this.LinefindOperateListModel.push(obj)
                        } else if (current.propertyType == 'TimeInterval') {
                            let timeObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'TimeInterval',
                                displayed: current.displayed != '0',
                                timeStart: '',
                                timeEnd: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                representative: current.representative
                            }
                            this.LinefindOperateListModel.push(timeObj)
                        } else if (current.propertyType == 'DateTime') {
                            let timeDataObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'DateTime',
                                displayed: current.displayed != '0',
                                value: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                representative: current.representative
                            }
                            this.LinefindOperateListModel.push(timeDataObj)
                        } else {
                            let stringObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'String',
                                value: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                displayed: current.displayed != '0',
                                representative: current.representative
                            }
                            this.LinefindOperateListModel.push(stringObj)
                        }
                    } else {
                        if (current.propertyType == 'GisData') {
                            let obj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'GisData',
                                displayed: current.displayed != '0',
                                address: '',
                                latitude: '',
                                longitude: '',
                                displayname: current.displayname,
                                representative: current.representative,
                                label: current.representative == 1
                            }
                            this.LinefindOperateListModelAll.push(obj)
                        } else if (current.propertyType == 'TimeInterval') {
                            let timeObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'TimeInterval',
                                displayed: current.displayed != '0',
                                timeStart: '',
                                timeEnd: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                representative: current.representative
                            }
                            this.LinefindOperateListModelAll.push(timeObj)
                        } else if (current.propertyType == 'DateTime') {
                            let timeDataObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'DateTime',
                                displayed: current.displayed != '0',
                                value: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                representative: current.representative
                            }
                            this.LinefindOperateListModelAll.push(timeDataObj)
                        } else {
                            let stringObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'String',
                                value: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                displayed: current.displayed != '0',
                                representative: current.representative
                            }
                            this.LinefindOperateListModelAll.push(stringObj)
                        }
                    }
                }
            })
        },
        // 根据对象Uri获得该该对象下所有可操作的属性
        getproperty (_uri) {
            this.showSelect = true
            findOperateProperties({ uri: _uri }).then(res => {
                let arrList = []
                this.findOperateList = res.data
                this.findOperateListModel = []
                this.findOperateListModelAll = []
                for (let i = 0; i < this.findOperateList.length; i++) {
                    let current = this.findOperateList[i]
                    if (current.representative == '1') {
                        if (current.propertyType == 'GisData') {
                            let obj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'GisData',
                                displayed: current.displayed != '0',
                                address: '',
                                latitude: '',
                                longitude: '',
                                displayname: current.displayname,
                                representative: current.representative,
                                label: current.representative == 1
                            }
                            this.findOperateListModel.push(obj)
                        } else if (current.propertyType == 'TimeInterval') {
                            let timeObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'TimeInterval',
                                displayed: current.displayed != '0',
                                timeStart: '',
                                timeEnd: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                representative: current.representative
                            }
                            this.findOperateListModel.push(timeObj)
                        } else if (current.propertyType == 'DateTime') {
                            let timeDataObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'DateTime',
                                displayed: current.displayed != '0',
                                value: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                representative: current.representative
                            }
                            this.findOperateListModel.push(timeDataObj)
                        } else {
                            let stringObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'String',
                                value: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                displayed: current.displayed != '0',
                                representative: current.representative
                            }
                            this.findOperateListModel.push(stringObj)
                        }
                    } else {
                        if (current.propertyType == 'GisData') {
                            let obj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'GisData',
                                displayed: current.displayed != '0',
                                address: '',
                                latitude: '',
                                longitude: '',
                                displayname: current.displayname,
                                representative: current.representative,
                                label: current.representative == 1
                            }
                            this.findOperateListModelAll.push(obj)
                        } else if (current.propertyType == 'TimeInterval') {
                            let timeObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'TimeInterval',
                                displayed: current.displayed != '0',
                                timeStart: '',
                                timeEnd: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                representative: current.representative
                            }
                            this.findOperateListModelAll.push(timeObj)
                        } else if (current.propertyType == 'DateTime') {
                            let timeDataObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'DateTime',
                                displayed: current.displayed != '0',
                                value: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                representative: current.representative
                            }
                            this.findOperateListModelAll.push(timeDataObj)
                        } else {
                            let stringObj = {
                                propertyUri: current.propertyUri,
                                propertyType: 'String',
                                value: '',
                                label: current.representative == 1,
                                displayname: current.displayname,
                                displayed: current.displayed != '0',
                                representative: current.representative
                            }
                            this.findOperateListModelAll.push(stringObj)
                        }
                    }
                }
            })
        },
        // 查询选择属性类型
        handleChoosePropertyUri (_uri) {
            this.addAttributeSave = {}
            for (let i = 0; i < this.findOperateListModelAll.length; i++) {
                let current = this.findOperateListModelAll[i]
                if (current.representative === '1') {
                    this.$message.error('该属性为代表属性，不允许操作!')
                    return false
                }
                if (current.propertyUri == _uri) {
                    this.addAttribute.propertyType = current.propertyType
                    this.addAttribute.name = current.displayname
                }
            }
            this.propertyType = ''
            for (let j = 0; j < this.propertyList.length; j++) {
                let propertyListCurrent = this.propertyList[j]
                for (let k = 0; k < propertyListCurrent.propertyValues.length; k++) {
                    if (
                        _uri == propertyListCurrent.propertyUri &&
            !propertyListCurrent.propertyValues[k].readOnly
                    ) {
                        this.propertyType = 'edit'
                    }
                }
            }
            console.log(this.propertyType)
            console.log(this.addAttributeSave)
        },
        // 边查询选择属性类型
        handleChoosePropertyUriLine (_uri) {
            console.log(_uri)
            console.log(this.LinefindOperateListModelAll)
            this.addAttributeLineSave = {}
            for (let i = 0; i < this.LinefindOperateListModelAll.length; i++) {
                let current = this.LinefindOperateListModelAll[i]
                if (current.representative === '1') {
                    this.$message.error('该属性为代表属性，不允许操作!')
                    return false
                }
                if (current.propertyUri == _uri) {
                    this.addAttributeLine.propertyType = current.propertyType
                    this.addAttributeLine.name = current.displayname
                }
            }
            // todosome
            this.LinepropertyType = ''
            for (let j = 0; j < this.LinepropertyList.length; j++) {
                let propertyListCurrent = this.LinepropertyList[j]
                for (let k = 0; k < propertyListCurrent.propertyValues.length; k++) {
                    if (
                        _uri == propertyListCurrent.propertyUri &&
            !propertyListCurrent.propertyValues[k].readOnly
                    ) {
                        this.LinepropertyType = 'edit'
                    }
                }
            }
        },
        // 取消属性
        handleCannel () {
            let vm = this
            vm.showSelect = false
            vm.addAttributeSave = {}
            vm.addAttribute.propertyType = ''
            vm.addAttribute = {}
        },
        // 线取消属性
        handleCannelLine () {
            let vm = this
            vm.showselectLineProtype = false
            vm.addAttributeLineSave = {}
            vm.addAttributeLine.propertyType = ''
            vm.addAttributeLine = {}
        },

        // 属性新增或编辑
        handleCreateAttr () {
            console.log(this.addAttributeSave)
            // propertySave propertyUpdate
            let vm = this
            let propertyeObj = {
                objectUri: this.nodesParmas.objecturi,
                rowkey: this.nodesParmas.rowkey,
                propertyList: []
            }
            this.addAttributeSave.propertyUri = this.addAttribute.propertyUri
            this.addAttributeSave.propertyType = this.addAttribute.propertyType
            if (this.addAttribute.propertyType == 'TimeInterval') {
                if (!this.addAttributeSave.timeStart) {
                    this.$message.error('请选择开始时间')
                    return false
                }
                if (!this.addAttributeSave.timeEnd) {
                    this.$message.error('请选择结束时间')
                    return false
                }
                this.addAttributeSave.timeStart = new Date(
                    this.addAttributeSave.timeStart
                ).getTime()
                this.addAttributeSave.timeEnd = new Date(
                    this.addAttributeSave.timeEnd
                ).getTime()
            } else if (this.addAttribute.propertyType == 'DateTime') {
                if (!this.addAttributeSave.value) {
                    this.$message.error('请选择日期')
                    return false
                }
                this.addAttributeSave.value = new Date(
                    this.addAttributeSave.value
                ).getTime()
            } else if (this.addAttribute.propertyType == 'GisData') {
                if (!this.addAttributeSave.latitude) {
                    this.$message.error('请输入经度')
                    return false
                }
                if (!this.addAttributeSave.longitude) {
                    this.$message.error('请输入纬度')
                    return false
                }
                if (!this.addAttributeSave.address) {
                    this.$message.error('请输入描述')
                    return false
                }
            } else {
                if (!this.addAttributeSave.value) {
                    this.$message.error('请输入内容')
                    return false
                }
            }
            propertyeObj.propertyList.push(this.addAttributeSave)
            if (this.propertyType == 'edit') {
                console.log('edit')
                propertyUpdate(propertyeObj).then(res => {
                    if (res.status == 200) {
                        vm.getNodeDetails(vm.nodesParmas.rowkey, vm.nodesParmas.objecturi)
                        setTimeout(() => {
                            // vm.handleGetGraph()
                            // vm.handlenewSnapshot()
                        }, 100)
                        vm.showSelect = false
                        vm.addAttributeSave = {}
                        vm.addAttribute.propertyType = ''
                        vm.addAttribute = {}
                    }
                })
            } else {
                propertySave(propertyeObj).then(res => {
                    if (res.status == 200) {
                        console.log(vm.rowkey)
                        console.log(vm.nodesParmas.rowkey)
                        vm.getNodeDetails(vm.nodesParmas.rowkey, vm.nodesParmas.objecturi)
                        setTimeout(() => {
                            // vm.handleGetGraph()
                            // vm.handlenewSnapshot()
                        }, 100)
                        vm.showSelect = false
                        vm.addAttributeSave = {}
                        vm.addAttribute.propertyType = ''
                        vm.addAttribute = {}
                    }
                })
            }
        },
        // 线属性或编辑
        handleCreateAttrLine () {
            console.log(123456)
            console.log(this.addAttributeLineSave)
            console.log(this.link_object)
            let vm = this
            let propertyeObj = {
                // todosome
                linkId: this.Link_id,
                propertyList: []
            }
            this.addAttributeLineSave.propertyUri = this.addAttributeLine.propertyUri
            this.addAttributeLineSave.propertyType = this.addAttributeLine.propertyType
            if (this.addAttribute.propertyType == 'TimeInterval') {
                if (!this.addAttributeLineSave.timeStart) {
                    this.$message.error('请选择开始时间')
                    return false
                }
                if (!this.addAttributeLineSave.timeEnd) {
                    this.$message.error('请选择结束时间')
                    return false
                }
                this.addAttributeLineSave.timeStart = new Date(
                    this.addAttributeLineSave.timeStart
                ).getTime()
                this.addAttributeLineSave.timeEnd = new Date(
                    this.addAttributeLineSave.timeEnd
                ).getTime()
            } else if (this.addAttributeLine.propertyType == 'DateTime') {
                if (!this.addAttributeLineSave.value) {
                    this.$message.error('请选择日期')
                    return false
                }
                this.addAttributeLineSave.value = new Date(
                    this.addAttributeLineSave.value
                ).getTime()
            } else if (this.addAttributeLine.propertyType == 'GisData') {
                if (!this.addAttributeLineSave.latitude) {
                    this.$message.error('请输入经度')
                    return false
                }
                if (!this.addAttributeLineSave.longitude) {
                    this.$message.error('请输入纬度')
                    return false
                }
                if (!this.addAttributeLineSave.address) {
                    this.$message.error('请输入描述')
                    return false
                }
            } else {
                if (!this.addAttributeLineSave.value) {
                    this.$message.error('请输入内容')
                    return false
                }
            }
            propertyeObj.propertyList.push(this.addAttributeLineSave)
            if (this.LinepropertyType == 'edit') {
                console.log('edit')
                LinepropertyUpdate(JSON.stringify([propertyeObj])).then(res => {
                    if (res.status == 200) {
                        // 更新线的属性信息
                        getLinkDetail({ linkId: this.Link_id }).then(res => {
                            if (res.status == 200) {
                                vm.LinepropertyList = res.data.linkPropertys
                                    ? res.data.linkPropertys
                                    : []
                            }
                        })
                        setTimeout(() => {
                            // vm.handleGetGraph()
                            // vm.handlenewSnapshot()
                        }, 100)
                        vm.showselectLineProtype = false
                        vm.addAttributeLineSave = {}
                        vm.addAttributeLine.propertyType = ''
                        vm.addAttributeLine = {}
                    }
                })
            } else {
                console.log('add')
                LinepropertySave(JSON.stringify([propertyeObj])).then(res => {
                    if (res.status == 200) {
                        // 更新线的属性信息
                        getLinkDetail({ linkId: this.Link_id }).then(res => {
                            if (res.status == 200) {
                                vm.LinepropertyList = res.data.linkPropertys
                                    ? res.data.linkPropertys
                                    : []
                            }
                        })
                        setTimeout(() => {
                            // vm.handleGetGraph()
                            // vm.handlenewSnapshot()
                        }, 100)
                        vm.showselectLineProtype = false
                        vm.addAttributeLineSave = {}
                        vm.addAttributeLine.propertyType = ''
                        vm.addAttributeLine = {}
                    }
                })
            }
        },
        // 查找出一级目录
        handleLevelOne (data, parent) {
            var tree = []
            var temp
            for (var i = 0; i < data.length; i++) {
                if (data[i].parentkey == parent) {
                    var obj = data[i]
                    obj.label = data[i].displayname
                    obj.value = data[i].uri
                    obj.parenturi = data[i].parenturi
                    obj.parent = parent
                    temp = this.handleLevelOne(data, data[i].ownkey)
                    if (temp.length > 0) {
                        obj.children = temp
                    }
                    tree.push(obj)
                }
            }
            return tree
        },

        // 创建实体检验
        handleEntityVerify () {
            for (let i = 0; i < this.findOperateListModel.length; i++) {
                let current = this.findOperateListModel[i]
                if (current.propertyType == 'GisData') {
                    if (!current.longitude) {
                        this.$message.error('请输入经度')
                        this.createLoading = false
                        return false
                    }
                    if (!current.latitude) {
                        this.$message.error('请输入纬度')
                        this.createLoading = false
                        return false
                    }
                    if (!current.address) {
                        this.$message.error('请输入地理位置描述')
                        this.createLoading = false
                        return false
                    }
                    // TimeInterval timeStart timeEnd
                } else if (current.propertyType == 'TimeInterval') {
                    if (!current.timeStart) {
                        this.$message.error('请选择开始时间')
                        this.createLoading = false
                        return false
                    }
                    if (!current.timeEnd) {
                        this.$message.error('请选择结束时间')
                        this.createLoading = false
                        return false
                    }
                } else {
                    if (!current.value) {
                        this.$message.error(`请输入${current.displayname}`)
                        this.createLoading = false
                        return false
                    }
                }
            }
            return true
        },

        // 创建实体
        handleSaveEntity () {
            let vm = this
            this.createLoading = true
            for (let i = 0; i < this.findOperateListModel.length; i++) {
                let current = this.findOperateListModel[i]
                if (current.propertyType == 'TimeInterval') {
                    current.timeStart = new Date(current.timeStart).getTime()
                    current.timeEnd = new Date(current.timeEnd).getTime()
                } else if (current.propertyType == 'DateTime') {
                    current.value = new Date(current.value).getTime()
                }
            }
            let saveOperate = JSON.parse(JSON.stringify(this.findOperateListModel))
            for (let j = 0; j < saveOperate.length; j++) {
                let _index = saveOperate[j]
                delete _index.displayname
                delete _index.representative
            }
            let queryObj = {
                objectUri: this.example,
                propertyList: saveOperate
            }
            let verify = this.handleEntityVerify()
            if (!verify) {
                this.createLoading = false
                return
            }
            saveExample(queryObj)
                .then(res => {
                    this.createLoading = false
                    if (res.status == 200) {
                        let entityData = res.data
                        let entityObj = {
                            id: '',
                            data: {
                                id: entityData.rowkey,
                                displayname: entityData.displayName,
                                name: entityData.name,
                                showName: entityData.showName,
                                image: entityData.iconUrl,
                                objecttype: entityData.objectType,
                                objecturi: entityData.objectUri,
                                rowkey: entityData.rowkey,
                                twoway: entityData.twoway,
                                belongGroup: entityData.belongGroup
                            }
                        }
                        this.cy.add(entityObj)
                        this.handleInitializeData()
                        this.addNodesVisible = false
                        this.handlenewSnapshot()
                    }
                })
                .catch(error => {
                    this.createLoading = false
                })
        },

        // 创建边
        handleCreateEdge (_uri) {
            let vm = this
            this.nodesVisible = false
            this.showEdges = true
            if (_uri == '落地') {
                this.cy.collection('edge').addClass('dull')
                this.cy.collection('node').addClass('dull')
                // 判断当前选择的节点是什么类型
                // 实体
                console.log(this.currentSelectNode)
                let CbelongGroup = this.currentSelectNode.belongGroup
                    ? this.currentSelectNode.belongGroup
                    : ''
                if (CbelongGroup && CbelongGroup == 'socialaccount') {
                    for (let item of this.cy.json().elements.nodes) {
                        console.log(item)
                        if (item.data.belongGroup) {
                            if (
                                item.data.belongGroup == 'keyfigures' ||
                item.data.belongGroup == 'focusgroup'
                            ) {
                                // todo
                                vm.cy.$('#' + item.data.id).removeClass('dull')
                            }
                        }
                    }
                } else if (CbelongGroup && CbelongGroup == 'keyfigures') {
                    // 重点人物
                    for (let item of this.cy.json().elements.nodes) {
                        console.log(item)
                        if (item.data.belongGroup) {
                            if (item.data.belongGroup == 'socialaccount') {
                                // todo
                                vm.cy.$('#' + item.data.id).removeClass('dull')
                            }
                        }
                    }
                } else if (CbelongGroup && CbelongGroup == 'focusgroup') {
                    // 重点组织
                    for (let item of this.cy.json().elements.nodes) {
                        console.log(item)
                        if (item.data.belongGroup) {
                            if (item.data.belongGroup == 'socialaccount') {
                                // todo
                                vm.cy.$('#' + item.data.id).removeClass('dull')
                            }
                        }
                    }
                }
                this.createRelationTemp.linkUri = 'com.scistor.link.iswho'
                this.disabledIswho = true
            } else {
                this.createRelationTemp.linkUri = ''
                this.disabledIswho = false
            }
            // vm.eh.start(vm.cy.$(`#${vm.nodeId}`));
            // vm.eh.options.preview =  true
        },

        // 获取快照
        handleGetSnapshot () {
            let vm = this
            vm.getSnapshotList = []
            let snapshotObj = {
                caseId: sessionStorage.getItem('groupId')
                    ? sessionStorage.getItem('groupId')
                    : 1,
                id: ''
            }
            getSnapshot(snapshotObj)
                .then(res => {
                    if (res.status == 200) {
                        vm.getSnapshotList = res.data
                        // if (this.getSnapshotList.length == 0) {
                        //   getGraph({caseId: sessionStorage.getItem('groupId') ? sessionStorage.getItem('groupId') : 1}).then(res => {
                        //     if (res.data.graphData) {
                        //       this.layoutId = res.data.id
                        //       let result = JSON.parse(res.data.graphData);
                        //       let obj = {
                        //         nodes: [],
                        //         edges: [],
                        //       }
                        //       obj.nodes = result.elements.nodes
                        //       vm.cy.add(obj.nodes)
                        //       vm.handleInitializeData()
                        //       if (result.elements.edges) {
                        //         obj.edges = result.elements.edges
                        //         vm.cy.add(obj.edges)
                        //         vm.handleInitializeData()
                        //       }
                        //     }
                        //   })
                        // }
                        if (vm.getSnapshotList.length == 0) {
                            this.historyName = ''
                            this.handleGetCookiesNodes()
                        }
                        for (let i = 0; i < vm.getSnapshotList.length; i++) {
                            vm.getSnapshotList[i].editDes = false
                        }
                        vm.snapshotActive = 0
                        this.handleGetGraph()
                        // }
                    } else {
                        this.$message.error(res.msg)
                    }
                })
                .catch(error => {
                    this.$message.error(error)
                })
        },

        // 获取画布上所有边
        handleGetAllEdges () {
            let vm = this
            vm.dataTime = []
            vm.dataData = []
            let allData = vm.cy.json()
            if (allData.elements.edges) {
                let hasEchart = {}
                if (allData.elements.edges && allData.elements.edges.length != 0) {
                    vm.resultEdges = allData.elements.edges
                    for (let i = 0; i < allData.elements.edges.length; i++) {
                        let current = allData.elements.edges[i]
                        if (current.data.starttime) {
                            let current = allData.elements.edges[i]
                            let timeFormat = formatDateTime(current.data.starttime)
                            if (!hasEchart[formatDateTime(current.data.starttime)]) {
                                hasEchart[formatDateTime(current.data.starttime)] = 1
                            } else {
                                hasEchart[formatDateTime(current.data.starttime)] =
                  hasEchart[formatDateTime(current.data.starttime)] + 1
                            }
                        }
                    }
                }
                if (hasEchart) {
                    for (let key in hasEchart) {
                        vm.dataTime.unshift(key)
                        // vm.dataData.unshift(hasEchart[key])
                    }
                }
                let arr = []
                if (vm.dataTime.length != 0) {
                    for (let l = 0; l < vm.dataTime.length; l++) {
                        let indexCurrent = vm.dataTime[l]
                        let endDataTime = new Date(
                            indexCurrent.replace(/-/g, '/')
                        ).getTime()
                        arr.push(endDataTime)
                    }
                }
                if (arr.length != 0) {
                    vm.dataTime = []
                    arr.sort(function (a, b) {
                        return b - a
                    })
                    for (let a = 0; a < arr.length; a++) {
                        vm.dataTime.unshift(formatDateTime(arr[a]))
                        if (hasEchart) {
                            vm.dataData.unshift(hasEchart[formatDateTime(arr[a])])
                        }
                    }
                }
                //
                console.log(1234567)
                vm.initChart()
            }
        },

        handelSaveDataTip (_id, _index, _name) {
            this.handleGetSnapDataById(_id, _index, _name)
            // this.$confirm('请先保存快照，防止数据丢失', '确认信息', {
            //   distinguishCancelAndClose: true,
            //   confirmButtonText: '确定',
            //   cancelButtonText: '放弃保存'
            // })
            //   .then(() => {
            //   })
            //   .catch(action => {
            //     if (action === 'cancel') {
            //
            //     }
            //   });
        },

        // 创建时间轴
        async handleCreateLint () {
            let vm = this
            vm.dataTime = []
            vm.dataData = []
            let allCyData = this.cy.json()
            // 只有线
            // if (allCyData.elements.edges != undefined) {
            //   if (allCyData.elements.edges.length != 0) {
            //     let edgesList = allCyData.elements.edges;
            //     //获取所有时间并排序
            //     let sortTime = [];
            //     let sortTimes = []
            //     for (let i = 0; i < allCyData.elements.edges.length; i++) {
            //       if (allCyData.elements.edges[i].data.starttime) {
            //         // if(this.allTimeCheck.includes())
            //         sortTimes.push(allCyData.elements.edges[i].data.starttime)

            //       }
            //     }
            //     sortTimes.sort(function (a, b) {
            //       return a - b
            //     })
            //     for (let u = 0; u < sortTimes.length; u++) {
            //       sortTime.push(formatDateTime(sortTimes[u]))
            //     }
            //     let s=new Set(sortTime);
            //     let arr = [...s];

            //     this.dataTime = arr
            //     let hasEchart = {}
            //     for (let j = 0; j < this.dataTime.length; j++) {
            //       hasEchart[this.dataTime[j]] = 0;
            //     }

            //     for (let m = 0; m < allCyData.elements.edges.length; m++) {
            //       if (allCyData.elements.edges[m].data.starttime) {
            //         let formatDTIndex = allCyData.elements.edges[m].data.starttime;
            //         hasEchart[formatDateTime(formatDTIndex)] = hasEchart[formatDateTime(formatDTIndex)] + 1
            //       }
            //     }

            //     for (let key in hasEchart ) {
            //       vm.dataData.push(hasEchart[key])
            //     }
            //     console.log(12345)
            //     vm.initChart()
            //     if(this.chart){
            //       setTimeout(() => {
            //         this.chart.resize();
            //       }, 150)
            //       this.chart.on('brushSelected', function (params) {
            //         console.log(params.batch[0].areas)
            //         if (params.batch[0].areas.length != 0) {
            //           let start = new Date(vm.dataTime[params.batch[0].areas[0].coordRange[0]].replace(/-/g, '/')).getTime();
            //           let end = new Date(vm.dataTime[params.batch[0].areas[0].coordRange[1]].replace(/-/g, '/')).getTime();
            //           if (allCyData.elements.edges.length != 0) {
            //             vm.cy.collection("edge").removeClass("edgeActive");
            //             for (let j = 0; j < allCyData.elements.edges.length; j++) {
            //               let curretnIndex = allCyData.elements.edges[j]
            //               let timeFormat = formatDateTime(curretnIndex.data.starttime)
            //               let timeDate = new Date(timeFormat.replace(/-/g, '/')).getTime();
            //               if (timeDate >= start && timeDate <= end) {
            //                 vm.cy.$(`#${curretnIndex.data.id}`).addClass('edgeActive')
            //               }
            //             }
            //           }

            //         }
            //         // if (params.batch[0]) {
            //         //   console.log(params.batch[0].areas[0].coordRanges)
            //         // }
            //       })
            //     }
            //   }
            // } else {
            //   vm.initChart()
            // }
            // 线和对象都有
            // 先获取画布上所有对象存入数组newallCyData
            let newallCyData = []
            let xData = []
            let yData = []
            let newxData = []
            let currentTimeCheck = []
            let DataMap = new Map()
            if (allCyData.elements.edges) {
                newallCyData = [...allCyData.elements.edges]
                if (allCyData.elements.nodes) {
                    newallCyData = [...newallCyData, ...allCyData.elements.nodes]
                }
            }
            console.log(newallCyData)
            if (newallCyData && newallCyData.length > 0) {
                for (let item of newallCyData) {
                    // 如果是线
                    if (item.group == 'edges' && item.data.starttime) {
                        if (currentTimeCheck.indexOf(item.data.name) == '-1') {
                            currentTimeCheck.push(item.data.name)
                        }
                        if (!xData.includes(item.data.starttime)) {
                            // 往x轴添加属性
                            console.log(item.data.starttime)
                            xData.push(item.data.starttime)
                            let num = DataMap.get(item.data.starttime)
                                ? DataMap.get(item.data.id).push()
                                : [item.data.id]
                            DataMap.set(item.data.starttime, num)
                        } else {
                            if (DataMap.get(item.data.starttime)) {
                                DataMap.get(item.data.starttime).push(item.data.id)
                            }
                        }
                    } else if (item.group == 'nodes' && item.data.objecturi) {
                        let result = await getdetail({
                            rowkey: item.data.rowkey,
                            objectUri: item.data.objecturi
                        })
                        // getdetail({rowkey:item.data.rowkey,objectUri:item.data.objecturi}).then((res)=>{
                        for (let list of result.data.propertyList) {
                            // 保存时间属性的属性名称
                            if (
                                list.propertyType == 'DateTime' ||
                list.propertyType == 'TimeInterval'
                            ) {
                                //
                                let name = list.propertyName
                                if (currentTimeCheck.indexOf(name) == '-1') {
                                    currentTimeCheck.push(name)
                                }
                            }
                            // 如果对象存在时间属性
                            if (list.propertyType == 'TimeInterval') {
                                // 当前时间已经存在
                                let cv = new Date(
                                    list.propertyValues[0].value.timeStart
                                ).valueOf()
                                console.log(cv)
                                if (!xData.includes(cv)) {
                                    console.log(list.propertyValues[0].value.timeStart)
                                    xData.push(cv)
                                    let num = DataMap.get(cv)
                                        ? DataMap.get(item.data.id).push()
                                        : [item.data.id]
                                    DataMap.set(cv, num)
                                } else {
                                    if (DataMap.get(cv)) {
                                        DataMap.get(cv).push(item.data.id)
                                    }
                                }
                            } else if (list.propertyType == 'DateTime') {
                                let cv1 = new Date(list.propertyValues[0].value).valueOf()
                                if (!xData.includes(cv1)) {
                                    console.log(list.propertyValues[0].value)
                                    xData.push(cv1)
                                    let num = DataMap.get(cv1)
                                        ? DataMap.get(item.data.id).push()
                                        : [item.data.id]
                                    DataMap.set(cv1, num)
                                } else {
                                    if (DataMap.get(cv1)) {
                                        DataMap.get(cv1).push(item.data.id)
                                    }
                                }
                            }
                        }
                        // })
                    }
                }
                console.log(xData)
                // 排序
                xData.sort((a, b) => a - b)
                // 初始值
                for (let self of xData) {
                    newxData.push(util.timestampToTime(self))
                    yData.push(DataMap.get(self).length)
                }
                console.log(yData)
                this.dataTime = newxData
                this.dataData = yData
                this.allTimeCheck = currentTimeCheck
                this.checkedNames = this.allTimeCheck

                vm.initChart()
                if (this.chart) {
                    setTimeout(() => {
                        this.chart.resize()
                    }, 150)
                    this.chart.on('brushSelected', function (params) {
                        console.log(params.batch[0].areas)
                        // 线
                        if (params.batch[0].areas.length != 0) {
                            let start = new Date(
                                vm.dataTime[params.batch[0].areas[0].coordRange[0]].replace(
                                    /-/g,
                                    '/'
                                )
                            ).getTime()
                            let end = new Date(
                                vm.dataTime[params.batch[0].areas[0].coordRange[1]].replace(
                                    /-/g,
                                    '/'
                                )
                            ).getTime()
                            if (allCyData.elements.edges.length != 0) {
                                vm.cy.collection('edge').removeClass('edgeActive')
                                for (let j = 0; j < allCyData.elements.edges.length; j++) {
                                    let curretnIndex = allCyData.elements.edges[j]
                                    let timeFormat = formatDateTime(curretnIndex.data.starttime)
                                    let timeDate = new Date(
                                        timeFormat.replace(/-/g, '/')
                                    ).getTime()
                                    if (timeDate >= start && timeDate <= end) {
                                        vm.cy.$(`#${curretnIndex.data.id}`).addClass('edgeActive')
                                    }
                                }
                            }
                        }
                        //  点对象
                        console.log(vm.dataTime)
                        let PD = params.batch[0].selected[0].dataIndex
                        let lineData = vm.dataTime.slice(PD[0], PD.length + PD[0])
                        let result = []
                        // 根据选择的时间段筛选出对象
                        for (let item of lineData) {
                            for (let list of DataMap.get(new Date(item).valueOf()))
                                {result.push(list)}
                        }
                        // 删除点的class类
                        vm.cy.collection('node').removeClass('nodeActive')
                        for (let self of [...new Set(result)]) {
                            if (vm.cy.$(`#${self}`)[0]._private.group) {
                                vm.cy.$(`#${self}`).addClass('nodeActive')
                            }
                        }
                        console.log([...new Set(result)])
                        // if (params.batch[0]) {
                        //   console.log(params.batch[0].areas[0].coordRanges)
                        // }
                    })
                }
            } else {
                vm.initChart()
            }
        },

        // 根据快照ID获取快照数据
        handleGetSnapDataById (_id, _index, _name) {
            let vm = this
            sessionStorage.setItem('historyName', _name)
            if (vm.getSnapshotList.length != 0) {
                this.historyName = sessionStorage.getItem('historyName')
            } else {
                this.historyName = ''
            }
            this.canvasId = _id
            this.snapshotActive = _index
            let snapDateById = {
                caseId: sessionStorage.getItem('groupId')
                    ? sessionStorage.getItem('groupId')
                    : 1,
                id: _id
            }
            getSnapDataById(snapDateById).then(res => {
                if (res.status == 200) {
                    vm.cy.collection('node').remove()
                    let result = {}
                    result = JSON.parse(res.data[0].graphData)
                    vm.resultEdges = []

                    let obj = {
                        nodes: [],
                        edges: []
                    }
                    obj.nodes = result.elements.nodes
                    vm.cy.add(obj.nodes)
                    vm.handleInitializeData()

                    if (result.elements.edges) {
                        obj.edges = result.elements.edges
                        vm.cy.add(obj.edges)
                    }
                    vm.handleCreateLint()
                    vm.handleInitializeData()
                    vm.handleGetCookiesNodes()
                    // vm.handleGroupIdList();
                    vm.handleLayoutRun()
                    vm.handleCreateLint()
                    // vm.handleLayoutRun('breadthfirst')
                }
            })
        },

        // 根据快照ID删除快照
        delSnapData: function (snapid, index) {
            let vm = this
            this.$confirm('删除该快照, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    deletedSnap(snapid)
                        .then(res => {
                            if (res.status == 200) {
                                vm.$message({
                                    message: '成功删除快照',
                                    type: 'success'
                                })
                                vm.getSnapshotList.splice(index, 1)
                                vm.handleGetSnapDataById(
                                    this.getSnapshotList[0].id,
                                    0,
                                    this.getSnapshotList[0].description
                                )
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                        .catch(error => {
                            this.$message.error(error)
                        })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        // 下载快照
        download (url) {
            window.location.href = url
        },
        editVisibleSnapData (snapid, _index, _description) {
            this.handleGetSnapDataById(snapid, _index, _description)
            this.getSnapshotList[_index].editDes = true
            this.getSnapshotList = Object.assign([], this.getSnapshotList)
            this.describeVisible1 = true
            this.editId = snapid
            this.editDescription = _description
            this.describe1 = _description
        },

        // 编辑快照
        editSnapData (snapid, _description, _index) {
            let _this = this
            var graph = _this.cy.json(),
                snap = _this.cy.png({ full: true })
            graph.panningEnabled = true
            graph.userPanningEnabled = true
            snapshot(
                JSON.stringify({
                    // snapshot: this.editId,
                    caseId: sessionStorage.getItem('groupId')
                        ? sessionStorage.getItem('groupId')
                        : 1,
                    // graphData: JSON.stringify(graph),
                    id: this.canvasId,
                    description: this.describe1
                })
            )
                .then(data => {
                    this.describeVisible1 = false
                    this.handleGetSnapshot()
                })
                .catch(error => {
                    this.$message.error(error)
                })
            // console.log('graph', graph)
        },

        // 生成快照
        handlenewSnapshot2: function () {
            let _this = this
            var graph = _this.cy.json(),
                snap = _this.cy.png({ full: true })
            graph.panningEnabled = true
            graph.userPanningEnabled = true
            snapshot(
                JSON.stringify({
                    snapshot: snap,
                    caseId: sessionStorage.getItem('groupId')
                        ? sessionStorage.getItem('groupId')
                        : 1,
                    graphData: JSON.stringify(graph),
                    id: this.canvasId,
                    description: this.historyName
                })
            )
                .then(data => {
                    // this.$message.success('图片生成成功！')
                    this.handleGetSnapshot()
                    this.cyVisible = false
                })
                .catch(error => {
                    this.$message.error(error)
                })
            // console.log('graph', graph)
        },

        handleAddDes () {
            let _this = this
            _this.describeVisible = true
            this.cyVisible = false
            this.describe = ''
        },
        handlenewSnapshot1: function () {
            let _this = this
            var graph = _this.cy.json(),
                snap = _this.cy.png({ full: true })
            graph.panningEnabled = true
            graph.userPanningEnabled = true
            snapshot(
                JSON.stringify({
                    snapshot: snap,
                    caseId: sessionStorage.getItem('groupId')
                        ? sessionStorage.getItem('groupId')
                        : 1,
                    graphData: JSON.stringify(graph),
                    description: this.describe
                })
            )
                .then(data => {
                    _this.describeVisible = false
                    // this.$message.success('图片生成成功！')
                    this.handleGetSnapshot()
                    this.cyVisible = false
                })
                .catch(error => {
                    _this.describeVisible = false
                    this.$message.error(error)
                })
            // console.log('graph', graph)
        },

        // 组织
        handleFocusgroup (_type) {
            let vm = this
            this.focusgroup = [] // 组织
            vm.nodesVisible = false
            let data = {
                rowkey: this.nodesParmas.rowkey,
                objectType: _type,
                objectUri: this.nodesParmas.objecturi,
                filterObjectUris: null
            }
            filterListRelation(data).then(res => {
                if (res.status == 200) {
                    let focusgroup = res.data

                    focusgroup.forEach(item => {
                        if (item.personIconUrl) {
                            item.iconUrl = item.personIconUrl
                        }
                    })
                    let hash = {}
                    const newArr = focusgroup.reduceRight((item, next) => {
                        hash[next.rowkey]
                            ? ''
                            : (hash[next.rowkey] = true && item.push(next))
                        return item
                    }, [])
                    this.focusgroup = newArr
                }
            })
        },

        // 人物
        handleKeyfigures (_type) {
            let vm = this
            this.keyfigures = [] // 人物
            vm.nodesVisible = false
            let data = {
                rowkey: this.nodesParmas.rowkey,
                objectType: _type,
                objectUri: this.nodesParmas.objecturi,
                filterObjectUris: null
            }
            filterListRelation(data).then(res => {
                if (res.status == 200) {
                    let keyfigures = res.data
                    keyfigures.forEach(item => {
                        if (item.personIconUrl) {
                            item.iconUrl = item.personIconUrl
                        }
                    })
                    let hash = {}
                    const newArr = keyfigures.reduceRight((item, next) => {
                        hash[next.rowkey]
                            ? ''
                            : (hash[next.rowkey] = true && item.push(next))
                        return item
                    }, [])
                    this.keyfigures = newArr
                }
            })
        },

        // 账号
        handleAccountNumber (_type) {
            let vm = this
            this.socialaccount = [] // 账号
            vm.nodesVisible = false
            let data = {
                rowkey: this.nodesParmas.rowkey,
                objectType: _type,
                objectUri: this.nodesParmas.objecturi,
                filterObjectUris: null
            }
            filterListRelation(data).then(res => {
                if (res.status == 200) {
                    let socialaccount = res.data
                    socialaccount.forEach(item => {
                        if (item.personIconUrl) {
                            item.iconUrl = item.personIconUrl
                        }
                    })
                    let hash = {}
                    const newArr = socialaccount.reduceRight((item, next) => {
                        hash[next.rowkey]
                            ? ''
                            : (hash[next.rowkey] = true && item.push(next))
                        return item
                    }, [])
                    this.socialaccount = newArr
                }
            })
        },

        // 动态
        handleDynamicCondition (_type) {
            let vm = this
            this.dynamicCondition = [] // 动态
            vm.nodesVisible = false
            let data = {
                rowkey: this.nodesParmas.rowkey,
                objectType: _type,
                objectUri: this.nodesParmas.objecturi,
                filterObjectUris: null
            }
            filterListRelation(data).then(res => {
                if (res.status == 200) {
                    let dynamicCondition = res.data
                    dynamicCondition.forEach(item => {
                        if (item.personIconUrl) {
                            item.iconUrl = item.personIconUrl
                        }
                    })
                    let hash = {}
                    const newArr = dynamicCondition.reduceRight((item, next) => {
                        hash[next.rowkey]
                            ? ''
                            : (hash[next.rowkey] = true && item.push(next))
                        return item
                    }, [])
                    this.dynamicCondition = newArr
                }
            })
        },
        // 文档
        handleDocument (_type) {
            let vm = this
            this.document = [] // 动态
            vm.nodesVisible = false
            let data = {
                rowkey: this.nodesParmas.rowkey,
                objectType: _type,
                objectUri: this.nodesParmas.objecturi,
                filterObjectUris: null
            }
            filterListRelation(data).then(res => {
                if (res.status == 200) {
                    let document = res.data
                    document.forEach(item => {
                        if (item.personIconUrl) {
                            item.iconUrl = item.personIconUrl
                        }
                    })
                    let hash = {}
                    const newArr = document.reduceRight((item, next) => {
                        hash[next.rowkey]
                            ? ''
                            : (hash[next.rowkey] = true && item.push(next))
                        return item
                    }, [])
                    this.document = newArr
                }
            })
        },
        // 多媒体
        handleMedia (_type) {
            let vm = this
            this.media = [] // 动态
            vm.nodesVisible = false
            let data = {
                rowkey: this.nodesParmas.rowkey,
                objectType: _type,
                objectUri: this.nodesParmas.objecturi,
                filterObjectUris: null
            }
            filterListRelation(data).then(res => {
                if (res.status == 200) {
                    let media = res.data
                    media.forEach(item => {
                        if (item.personIconUrl) {
                            item.iconUrl = item.personIconUrl
                        }
                    })
                    let hash = {}
                    const newArr = media.reduceRight((item, next) => {
                        hash[next.rowkey]
                            ? ''
                            : (hash[next.rowkey] = true && item.push(next))
                        return item
                    }, [])
                    this.media = newArr
                }
            })
        },
        handlenewSnapshot () {},
        // 删除关联事件(弹窗选择)
        handledeletSelect (_type) {
            // 获取实体
            this.handleGetTreeType(_type)
            this.deleteglSelectvisible = true
            this.delglSelectType = _type
            // this.selectTimeStart = ''
            // this.selectTimeEnd = ''
        },
        // 确认删除关联事件
        comfiredelGL () {
            let filterObjectUris = []
            for (let item of this.$refs.delGLtree.getCheckedNodes()) {
                filterObjectUris.push(item.uri)
            }
            this.checkALl = false
            let resultData = []
            let vm = this
            if (this.delglSelectType == 'socialaccount') {
                resultData = vm.socialaccount
            } else if (vm.delglSelectType == 'keyfigures') {
                resultData = vm.keyfigures
            } else if (vm.delglSelectType == 'focusgroup') {
                resultData = vm.focusgroup
            } else if (vm.delglSelectType == 'document') {
                resultData = vm.document
            } else if (vm.delglSelectType == 'media') {
                resultData = vm.media
            } else if (vm.delglSelectType == 'socialdynamic') {
                resultData = vm.dynamicCondition
            }
            if (resultData.length != 0) {
                let allData = vm.cy.json()
                let allnodeEdge = [...allData.elements.nodes]
                console.log(allnodeEdge)
                if (allnodeEdge) {
                    for (let i = 0; i < allnodeEdge.length; i++) {
                        let current = allnodeEdge[i].data.rowkey
                        console.log(current)
                        if (
                            resultData.find(item => {
                                console.log(item.rowkey)
                                return (
                                    current == item.rowkey &&
                  filterObjectUris.includes(item.objectUri)
                                )
                            })
                        ) {
                            vm.cy.remove(vm.cy.$(`#${current}`))

                            vm.nodesVisible = false
                            // 执行画布保存
                            vm.handlenewSnapshot()
                        }
                    }
                }
            }
            vm.deleteglSelectvisible = false
        },
        // 删除关联动态
        handleDeleteDynamicCondition () {
            let vm = this
            if (this.dynamicCondition.length != 0) {
                let allData = vm.cy.json()
                if (allData.elements.nodes) {
                    for (let i = 0; i < allData.elements.nodes.length; i++) {
                        let current = allData.elements.nodes[i].data.rowkey
                        if (
                            this.dynamicCondition.find(item => {
                                return current == item.rowkey
                            })
                        ) {
                            vm.cy.remove(vm.cy.$(`#${current}`))
                            vm.nodesVisible = false
                            // 执行画布保存
                            vm.handlenewSnapshot()
                        }
                    }
                }
            }
        },

        // 删除关联账号
        handleDeltetAccountNumber () {
            let vm = this
            if (this.socialaccount.length != 0) {
                let allData = vm.cy.json()
                if (allData.elements.nodes) {
                    for (let i = 0; i < allData.elements.nodes.length; i++) {
                        let current = allData.elements.nodes[i].data.rowkey
                        if (
                            this.socialaccount.find(item => {
                                return current == item.rowkey
                            })
                        ) {
                            vm.cy.remove(vm.cy.$(`#${current}`))
                            vm.nodesVisible = false
                            // 执行画布保存
                            vm.handlenewSnapshot()
                        }
                    }
                }
            }
        },

        // 删除人物
        handleDeleteFigure () {
            let vm = this
            if (this.keyfigures.length != 0) {
                let allData = vm.cy.json()
                if (allData.elements.nodes) {
                    for (let i = 0; i < allData.elements.nodes.length; i++) {
                        let current = allData.elements.nodes[i].data.rowkey
                        if (
                            this.keyfigures.find(item => {
                                return current == item.rowkey
                            })
                        ) {
                            vm.cy.remove(vm.cy.$(`#${current}`))
                            vm.nodesVisible = false
                            // 执行画布保存
                            vm.handlenewSnapshot()
                        }
                    }
                }
            }
        },

        // 删除组织
        handleDeltetOrganization () {
            let vm = this
            if (this.focusgroup.length != 0) {
                let allData = vm.cy.json()
                if (allData.elements.nodes) {
                    for (let i = 0; i < allData.elements.nodes.length; i++) {
                        let current = allData.elements.nodes[i].data.rowkey
                        if (
                            this.focusgroup.find(item => {
                                return current == item.rowkey
                            })
                        ) {
                            vm.cy.remove(vm.cy.$(`#${current}`))
                            vm.nodesVisible = false
                            // 执行画布保存
                            vm.handlenewSnapshot()
                        }
                    }
                }
            }
        },
        // 删除文档
        handleDeleteDocument () {
            let vm = this
            if (this.document.length != 0) {
                let allData = vm.cy.json()
                if (allData.elements.nodes) {
                    for (let i = 0; i < allData.elements.nodes.length; i++) {
                        let current = allData.elements.nodes[i].data.rowkey
                        if (
                            this.document.find(item => {
                                return current == item.rowkey
                            })
                        ) {
                            vm.cy.remove(vm.cy.$(`#${current}`))
                            vm.nodesVisible = false
                            // 执行画布保存
                            vm.handlenewSnapshot()
                        }
                    }
                }
            }
        },
        // 删除多媒体
        handleDeltetMedia () {
            let vm = this
            if (this.media.length != 0) {
                let allData = vm.cy.json()
                if (allData.elements.nodes) {
                    for (let i = 0; i < allData.elements.nodes.length; i++) {
                        let current = allData.elements.nodes[i].data.rowkey
                        if (
                            this.media.find(item => {
                                return current == item.rowkey
                            })
                        ) {
                            vm.cy.remove(vm.cy.$(`#${current}`))
                            vm.nodesVisible = false
                            // 执行画布保存
                            vm.handlenewSnapshot()
                        }
                    }
                }
            }
        },
        // 获取详情
        getNodeDetails (_rowkey, _objectUri) {
            let vm = this
            let getdetailObj = {
                rowkey: _rowkey,
                objectUri: _objectUri
            }
            getdetail(getdetailObj).then(res => {
                if (res.status == 200) {
                    let detailesData = res.data
                    if (
                        detailesData.belongGroup !== 'socialdynamic' &&
            detailesData.belongGroup !== 'document' &&
            detailesData.belongGroup !== 'media'
                    ) {
                        this.addGroup = true
                        this.addGroupName = '添加至该分组'
                        for (let [index, self] of this.groupList.entries()) {
                            if (self.rowkey === detailesData.rowkey) {
                                this.addGroupName = '从该分组中删除'
                            }
                        }
                    } else {
                        this.addGroup = false
                    }
                    let allData = {}
                    allData = vm.cy.json()
                    if (allData.elements.nodes) {
                        for (let i = 0; i < allData.elements.nodes.length; i++) {
                            let current = allData.elements.nodes[i]
                            if (current.data.id == _rowkey && detailesData.showName) {
                                current.data.showName = detailesData.showName
                            }
                        }
                        vm.cy.collection('node').remove()
                        vm.cy.add(allData.elements.nodes)
                        // vm.handleLayoutRun()
                        if (allData.elements.edges) {
                            vm.cy.add(allData.elements.edges)
                        }
                        vm.handleInitializeData()
                    }

                    // vm.handleLayoutRun()
                    this.propertyList = detailesData.propertyList
                }
            })
        },

        // 删除节点
        handleDeleteNode () {
            let vm = this
            vm.nodesVisible = false
            vm.showDetails = false
            if (vm.deleteId) {
                vm.cy.remove(vm.cy.$(`#${vm.deleteId}`))
                // 执行画布保存
                vm.handlenewSnapshot()
                vm.handleCreateLint()
            } else {
                vm.$message.error('请选择实体')
            }
        },

        // 添加至该分组
        handleAddGroup () {
            let vm = this
            let addinstanceObj = {
                gid: sessionStorage.getItem('groupId'),
                objs: [
                    {
                        objectUri: vm.objecturi,
                        rowkey: vm.rowkey
                    }
                ]
            }
            // 添加或者删除
            if (this.addGroupName == '添加至该分组') {
                addInstance(addinstanceObj)
                    .then(res => {
                        if (res.status == 200) {
                            this.groupList = []
                            this.page = 1
                            this.handleGroupList()
                            this.$message({
                                message: '添加至该分组成功',
                                type: 'success'
                            })
                            this.nodesVisible = false
                        } else {
                            this.$message({
                                message: '添加至该分组失败',
                                type: 'error'
                            })
                        }
                    })
                    .catch(error => {
                        this.$message({
                            message: error,
                            type: 'error'
                        })
                    })
            } else {
                deleteInstance({
                    gid: sessionStorage.getItem('groupId'),
                    rowkeys: [vm.rowkey]
                })
                    .then(res => {
                        if (res.status == 200) {
                            this.groupList = []
                            this.page = 1
                            this.handleGroupList()
                            this.$message({
                                message: '从该分组删除成功',
                                type: 'success'
                            })
                            this.nodesVisible = false
                        } else {
                            this.$message({
                                message: '从该分组删除失败',
                                type: 'error'
                            })
                        }
                    })
                    .catch(error => {
                        this.$message({
                            message: error,
                            type: 'error'
                        })
                    })
            }
        },
        openFilterListRelation (_type) {
            // 获取实体
            this.handleGetTreeType(_type)
            this.glSelectvisible = true
            this.glSelectType = _type
            this.selectTimeStart = ''
            this.selectTimeEnd = ''
        },
        // 删除关联全选
        delGLallSelect (val) {
            console.log(val)
      let new_arr = []
      for (let item of this.currentGxdata) {
                new_arr.push({ id: item.id })
            }
            console.log(new_arr)
            if (val) {
                this.$refs.delGLtree.setCheckedNodes(new_arr)
            } else {
                this.$refs.delGLtree.setCheckedNodes([])
            }
        },
        // 关联全选
        GLallSelect (val) {
            console.log(val)
      let new_arr = []
      for (let item of this.currentGxdata) {
                new_arr.push({ id: item.id })
      }
            console.log(new_arr)
      if (val) {
                this.$refs.GLtree.setCheckedNodes(new_arr)
      } else {
                this.$refs.GLtree.setCheckedNodes([])
      }
        },
        // 确认关联
        comfireGL () {
            let filterObjectUris = []
            for (let item of this.$refs.GLtree.getCheckedNodes()) {
                filterObjectUris.push(item.uri)
            }
            this.handleFilterListRelation(this.glSelectType, filterObjectUris)
            this.checkALl = false
        },
        //
        handleFilterListRelation (_type, filterObjectUris) {
            let vm = this
            vm.nodesVisible = false
            // 判断时间戳
            if (this.selectTimeEnd < this.selectTimeStart) {
                this.$message.error('结束时间不能小于开始时间')
                return false
            }
            let data = {
                rowkey: this.nodesParmas.rowkey,
                objectType: _type,
                objectUri: this.nodesParmas.objecturi,
                filterObjectUris: filterObjectUris,
                timeStart: this.selectTimeStart,
                timeEnd: this.selectTimeEnd
            }
            let otherRowkey = []
            filterListRelation(data).then(res => {
                if (res.status == 200) {
                    vm.glSelectvisible = false
                    let relationsData = res.data

                    relationsData.forEach(item => {
                        if (item.personIconUrl) {
                            item.iconUrl = item.personIconUrl
                        }
                    })

                    let hash = {}
                    const uniqueList = relationsData.reduceRight((item, next) => {
                        hash[next.rowkey]
                            ? ''
                            : (hash[next.rowkey] = true && item.push(next))
                        return item
                    }, [])
                    let relationsAdd = {
                        nodes: [],
                        edges: []
                    }
                    for (let i = 0; i < uniqueList.length; i++) {
                        let current = uniqueList[i]
                        otherRowkey.push(current.rowkey)
                        let relationsObj = {
                            id: '',
                            group: 'nodes',
                            data: {
                                id: current.rowkey,
                                displayname: current.displayName,
                                name: current.name,
                                showName: current.showName,
                                image: current.iconUrl,
                                objecttype: current.objectType,
                                objecturi: current.objectUri,
                                rowkey: current.rowkey,
                                twoway: current.twoway,
                                belongGroup: current.belongGroup
                            },
                            position: { x: 200 + i * 400, y: 200 }
                        }

            let relationsEdgeObj = {
                            group: 'edges',
                            data: {
                                id: current.linkId,
                                source: vm.nodesParmas.rowkey,
                                target: current.rowkey,
                                name: current.linkName
                                    ? current.linkName
                                    : current.name
                                        ? current.name
                                        : current.displayName,
                                rowkey: current.rowkey,
                                linkuri: current.linkUri,
                                endtime: current.timeEnd,
                                starttime: current.startTime,
                                twoway: current.path,
                                readOnly: current.readOnly
                            }
                        }
                        relationsAdd.nodes.push(relationsObj)
                        relationsAdd.edges.push(relationsEdgeObj)
                    }
                    vm.cy.add(relationsAdd.nodes)
          vm.handleInitializeData()
          vm.cy.add(relationsAdd.edges)
          vm.handleInitializeData()
          // vm.handleLayoutRun("breadthfirst");

          vm.handlenewSnapshot()
          let cyNodes = vm.cy.json()
          let cyNodeList = []
          if (cyNodes.elements.nodes) {
                        for (let n = 0; n < cyNodes.elements.nodes.length; n++) {
                            let currentNodes = cyNodes.elements.nodes[n]
                            if (currentNodes.data.rowkey) {
                                cyNodeList.push(currentNodes.data.rowkey)
                            }
                        }
                        vm.handleConfirmEdge(cyNodeList, otherRowkey)
                    }
                }
            })
        },

        // 关联账号和动态
        relationFun (_type) {
            let vm = this
            vm.nodesVisible = false
            let data = {
                primaryRowkey: this.nodesParmas.rowkey,
                objectType: _type,
                objecturi: this.nodesParmas.objecturi
            }
            let otherRowkey = []
            listRelationRoeKey(data).then(res => {
                if (res.status == 200) {
                    let relationsData = res.data
                    let hash = {}
                    const uniqueList = relationsData.reduceRight((item, next) => {
                        hash[next.rowkey]
                            ? ''
                            : (hash[next.rowkey] = true && item.push(next))
                        return item
                    }, [])
                    let relationsAdd = {
                        nodes: [],
                        edges: []
                    }
                    for (let i = 0; i < uniqueList.length; i++) {
                        let current = uniqueList[i]
                        otherRowkey.push(current.rowkey)
                        let relationsObj = {
                            id: '',
                            group: 'nodes',
                            data: {
                                id: current.rowkey,
                                displayname: current.displayName,
                                name: current.name,
                                showName: current.showName,
                                image: current.iconUrl,
                                objecttype: current.objectType,
                                objecturi: current.objectUri,
                                rowkey: current.rowkey,
                                twoway: current.twoway,
                                belongGroup: current.belongGroup
                            }
                        }

                        let relationsEdgeObj = {
                            group: 'edges',
                            data: {
                                id: current.linkId,
                                source: vm.nodesParmas.rowkey,
                                target: current.rowkey,
                                name: current.linkName
                                    ? current.linkName
                                    : current.name
                                        ? current.name
                                        : current.displayName,
                                rowkey: current.rowkey,
                                linkuri: current.linkUri,
                                endtime: current.timeEnd,
                                starttime: current.startTime,
                                twoway: current.path,
                                readOnly: current.readOnly
                            }
                        }
                        relationsAdd.nodes.push(relationsObj)
                        relationsAdd.edges.push(relationsEdgeObj)
                    }
                    vm.cy.add(relationsAdd.nodes)
                    vm.handleInitializeData()
                    vm.cy.add(relationsAdd.edges)
                    vm.handleInitializeData()
                    vm.handleLayoutRun('breadthfirst')

                    vm.handlenewSnapshot()
                    let cyNodes = vm.cy.json()
                    let cyNodeList = []
                    if (cyNodes.elements.nodes) {
                        for (let n = 0; n < cyNodes.elements.nodes.length; n++) {
                            let currentNodes = cyNodes.elements.nodes[n]
                            if (currentNodes.data.rowkey) {
                                cyNodeList.push(currentNodes.data.rowkey)
                            }
                        }
                        vm.handleConfirmEdge(cyNodeList, otherRowkey)
                    }
                }
            })
        },

        // 跳转页面
        viewObjectInfo (
            objectType,
            instanceUri,
            objectUri,
            name,
            displayName,
            icon,
            showName,
            isImportant,
            _belongGroup
        ) {
            let currentUrl = window.location.href
            currentUrl = currentUrl.split('#')[0]
            let nameShow = showName || displayName
            currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${nameShow}&icon=${icon}&name=${name}&belongGroup=${_belongGroup}`
            window.open(currentUrl, '')
            // if (objectType == 'com.scistor.object.entity') {
            //   currentUrl = `${currentUrl}#/display?isImportant=${isImportant}&objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${nameShow}&icon=${icon}&name=${name}&belongGroup=${_belongGroup}`
            //   window.open(currentUrl, '')
            // } else {
            //   currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${nameShow}&icon=${icon}&name=${name}&belongGroup=${_belongGroup}`
            //   window.open(currentUrl, '')
            // }
        },

        // 获取连接线的关系
        handleGetRelations () {
            let vm = this
            getOperateLinks().then(res => {
                if (res.status == 200) {
                    this.getRelationList = res.data
                    if (this.disabledIswho) {
                        this.createRelationTemp.linkUri = 'com.scistor.link.iswho'
                    }
                    if (!vm.handleVerify(vm.firstToGround, vm.secendToGround)) {
                        for (let i = 0; i < this.getRelationList.length; i++) {
                            if (this.getRelationList[i].uri == 'com.scistor.link.iswho') {
                                this.getRelationList.splice(i, 1)
                            }
                        }
                    }
                    // if (vm.targetUri != '')
                    // for (let i = 0; i < this.getRelationList.length; i++) {
                    //   if (this.getRelationList[i].uri == 'com.scistor.link.iswho') {
                    //     this.getRelationList.splice(i,1);
                    //   }
                    // }
                }
            })
        },

        // 创建关系—— 选择已有与新建切换
        toggleChooseOrAddRelation: function () {
            this.vindex = this.vindex === 0 ? 1 : 0
            this.timeStart = new Date()
            this.timeEnd = new Date()
        },

        confirmCreateRelation () {
            // 新建边
            let vm = this
            if (vm.createRelationTemp.relation == '1') {
                let data = {
                    object_source_uri: vm.nodeUri,
                    object_target_uri: vm.targetUri,
                    linkDTO: {
                        id: '',
                        uri: 'com.scistor.link.' + vm.createRelationTemp.linkDTO.uri,
                        gid: '',
                        type: vm.createRelationTemp.linkDTO.type,
                        displayname: vm.createRelationTemp.linkDTO.displayname,
                        description: vm.createRelationTemp.linkDTO.description
                    }
                }

                // 创建边
                saveLinkAndRelate2Objects(data)
                    .then(res => {
                        if (res.status == 200) {
                            let saveData = {
                                fromRowkey: vm.firstKeyWord,
                                toRowkey: vm.secondKeyWord,
                                linkUri: 'com.scistor.link.' + vm.createRelationTemp.linkDTO.uri
                            }
                            // 保存边
                            saveEdge(JSON.stringify(saveData))
                                .then(resData => {
                                    if (resData.status == 200) {
                                        vm.showEdges = false
                                        var edgeData = {
                                            group: 'edges',
                                            data: {
                                                id: resData.data.linkId,
                                                source: vm.nodeId,
                                                target: vm.targetNode,
                                                name: vm.createRelationTemp.linkDTO.displayname,
                                                linkuri: vm.createRelationTemp.linkDTO.uri,
                                                endtime: resData.data.endTime,
                                                starttime: resData.data.startTime,
                                                twoway: resData.data.path,
                                                readOnly: resData.data.readOnly
                                            }
                                        }
                                        vm.cy.add(edgeData)
                                        vm.handleInitializeData()
                                        vm.handlenewSnapshot()
                                        vm.handleCreateLint()
                                        vm.addEdgesVisible = false
                                    } else {
                                        vm.showEdges = false
                                    }
                                })
                                .catch(error => {
                                    vm.showEdges = false
                                })
                        }
                    })
                    .catch(error => {
                        vm.showEdges = false
                    })
            } else {
                let relationtxtName = this.getRelationList.find(item => {
                    return item.uri == this.createRelationTemp.linkUri
                })['displayname']
                // 现有边
                let hasData = {
                    linkUri: vm.createRelationTemp.linkUri,
                    objectSourceUri: vm.nodeUri,
                    objectTargetUri: vm.targetUri
                }
                relate2Objects(hasData)
                    .then(res => {
                        if (res.status == 200) {
                            let saveData = {
                                fromRowkey: vm.firstKeyWord,
                                toRowkey: vm.secondKeyWord,
                                linkUri: vm.createRelationTemp.linkUri,
                                timeStart: vm.timeStart ? vm.timeStart.getTime() : '',
                                timeEnd: vm.timeEnd ? vm.timeEnd.getTime() : ''
                            }
                            saveEdge(JSON.stringify(saveData))
                                .then(resDatas => {
                                    if (resDatas.status == 200) {
                                        vm.showEdges = false
                                        var edgeData = {
                                            group: 'edges',
                                            data: {
                                                id: resDatas.data.linkId,
                                                source: vm.nodeId,
                                                target: vm.targetNode,
                                                name: relationtxtName,
                                                linkuri: resDatas.data.linkUri,
                                                endtime: resDatas.data.endTime,
                                                starttime: resDatas.data.startTime,
                                                twoway: resDatas.data.path,
                                                readOnly: resDatas.data.readOnly
                                            }
                                        }
                                        vm.cy.add(edgeData)
                                        vm.handleInitializeData()
                                        vm.handlenewSnapshot()
                                        vm.handleCreateLint()
                                        vm.addEdgesVisible = false
                                    } else {
                                        vm.showEdges = false
                                    }
                                })
                                .catch(error => {
                                    vm.showEdges = false
                                })
                        }
                    })
                    .catch(error => {
                        vm.showEdges = false
                    })
            }
        }
    },
    computed: {
    // 相关实体分类数组
        socialaccountArray () {
            let result = []
            this.socialaccount.forEach(item => {
                result.push(item.name)
            })
            console.log(12345)
            this.selectsocialaccount = Array.from(new Set(result))[0]
            return Array.from(new Set(result))
        },
        // 相关实体分类数据
        dynamicConditionArray () {
            let result = []
            this.dynamicCondition.forEach(item => {
                result.push(item.name)
            })
            this.selectdynamicCondition = Array.from(new Set(result))[0]
            return Array.from(new Set(result))
        }
    },
    created () {
        this.groupDisplayName = sessionStorage.getItem('groupDisplayName')

        if (this.$route.query.groupId) {
            this.handleGroupList()
        }
        if (sessionStorage.getItem('groupId')) {
        } else {
            if (this.$route.query.groupId) {
                this.showCaseOpacity = true
                this.showCase = true
                sessionStorage.setItem('groupId', this.$route.query.groupId)

                for (let i = 0; i < this.loadTreeList.length; i++) {
                    let item = this.loadTreeList[i]
                    if (item.id == this.$route.query.groupId) {
                        this.activeNum = i
                    }
                }
            }
        }

        // this.handleGetSnapshot()
        this.loadTree()
    }
}
</script>

<style scoped>
@import '../../assets/relation.css';
</style>
<style lang="less" scoped>
.bar_box {
  position: absolute;
  right: 0;
  top: 0;
  .icon_select {
    background: #000000;
    box-shadow: none;
    border: 1px solid #aaaaaa;
    color: white;
    font-size: 17px;
    padding: 3px;
    width: auto;
    opacity: 0.5;
  }
}
.line-object {
  padding: 0.5em;
  background: #555;
  text-align: center;
  color: #ffffff;
  .from {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    p {
      width: 100%;
      padding: 2px 0;
    }
  }
  .to {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    p {
      width: 100%;
      padding: 2px 0;
    }
  }
  .middle {
    font-variant: small-caps;
    text-transform: lowercase;
    font-style: italic;
    color: #d4d4d4;
    font-weight: bold;
    border-top: 1px solid #3b3b3b;
    border-bottom: 1px solid #3b3b3b;
    background: #484848;
    margin: 0.5em -0.5em;
  }
}
</style>
<style lang="less">
#allTimeCheck {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  .el-checkbox {
    margin: 0;
    color: #ffffff;
    width: 100%;
  }
}
.line-popover {
  background: #444 !important;
  color: white;
  opacity: 0.9;
  .el-popover__title {
    color: #ffffff;
    font-weight: bold;
    font-size: 15px;
    line-height: 1;
    margin-bottom: 6px;
    border-bottom: 1px solid#ccc;
    padding-bottom: 6px;
  }
  .popper__arrow {
    &::after {
      border-top-color: #5f5f5f !important;
    }
  }
}
</style>
